fix: the "nearest" position is working properly (#207)

* add another w3c test

* fixes and tweaks

* attempting to make the new tests pass

* fix them tests

* fixing more edge cases

* refactor for clarity

* testing if logic for block and inline can be reused

* small typo

* maybe we can

* yes we can

* cleanup

* allow boundary to be a callback

* add bundlesize checks

* fix readme example

Author: stipsan

.circleci/config.yml

@@ -39,6 +39,7 @@ jobs:
       - restore-cache: *restore-cache
       - *install
       - run: yarn build
+      - run: npx bundlesize
       - save-cache: *save-cache
 
   Web Platform Tests:

.gitignore

@@ -4,11 +4,14 @@ node_modules
 **/cypress/screenshots
 **/cypress/videos
 
+# Typescript stuff
+typings
+src/*.js
+
 lerna-debug.log
 .next
 dist
 es
-typings
 umd
 /compute.js
 /index.js

README.md

@@ -62,14 +62,14 @@ scrollIntoView(node, {
   // Your scroll actions will always be an array, even if there is nothing to scroll
   behavior: scrollActions =>
     // list is sorted from innermost (closest parent to your target) to outermost (often the document.body or viewport)
-    scrollActions.forEach(([el, scrollTop, scrollLeft]) => {
+    scrollActions.forEach(({ el, top, left }) => {
       // implement the scroll anyway you want
-      el.scrollTop = scrollTop
-      el.scrollLeft = scrollLeft
+      el.scrollTop = top
+      el.scrollLeft = left
 
-      // If you need the relative scroll coordinates, for things like window.scrollBy style logic, just do the math
-      const offsetTop = el.scrollTop - scrollTop
-      const offsetLeft = el.scrollLeft - scrollLeft
+      // If you need the relative scroll coordinates, for things like window.scrollBy style logic or whatever, just do the math
+      const offsetTop = el.scrollTop - top
+      const offsetLeft = el.scrollLeft - left
     }),
   // all the other options (scrollMode, block, inline) still work, so you don't need to reimplement them (unless you really really want to)
 })

package.json

@@ -81,6 +81,16 @@
       "loose-envify"
     ]
   },
+  "bundlesize": [
+    {
+      "path": "./umd/scroll-into-view-if-needed.min.js",
+      "maxSize": "1.5 kB"
+    },
+    {
+      "path": "./umd/scroll-into-view-if-needed.js",
+      "maxSize": "2.3 kB"
+    }
+  ],
   "lint-staged": {
     "*.js": [
       "prettier --write",