scroll-into-view-if-needed - npm Package Compare versions

Comparing version 3.0.10 to 3.1.0

dist/index.js

@@ -1,1 +0,1 @@
-import{compute as e}from"compute-scroll-into-view";const o=e=>!1===e?{block:"end",inline:"nearest"}:(e=>e===Object(e)&&0!==Object.keys(e).length)(e)?e:{block:"start",inline:"nearest"};function t(t,n){if(!t.isConnected||!(e=>{let o=e;for(;o&&o.parentNode;){if(o.parentNode===document)return!0;o=o.parentNode instanceof ShadowRoot?o.parentNode.host:o.parentNode}return!1})(t))return;if((e=>"object"==typeof e&&"function"==typeof e.behavior)(n))return n.behavior(e(t,n));const r="boolean"==typeof n||null==n?void 0:n.behavior;for(const{el:i,top:a,left:l}of e(t,o(n)))i.scroll({top:a,left:l,behavior:r})}export{t as default};//# sourceMappingURL=index.js.map
+import{compute as t}from"compute-scroll-into-view";const o=t=>!1===t?{block:"end",inline:"nearest"}:(t=>t===Object(t)&&0!==Object.keys(t).length)(t)?t:{block:"start",inline:"nearest"};function e(e,r){if(!e.isConnected||!(t=>{let o=t;for(;o&&o.parentNode;){if(o.parentNode===document)return!0;o=o.parentNode instanceof ShadowRoot?o.parentNode.host:o.parentNode}return!1})(e))return;const n=(t=>{const o=window.getComputedStyle(t);return{top:parseFloat(o.scrollMarginTop)||0,right:parseFloat(o.scrollMarginRight)||0,bottom:parseFloat(o.scrollMarginBottom)||0,left:parseFloat(o.scrollMarginLeft)||0}})(e);if((t=>"object"==typeof t&&"function"==typeof t.behavior)(r))return r.behavior(t(e,r));const l="boolean"==typeof r||null==r?void 0:r.behavior;for(const{el:a,top:i,left:s}of t(e,o(r))){const t=i-n.top+n.bottom,o=s-n.left+n.right;a.scroll({top:t,left:o,behavior:l})}}export{e as default};//# sourceMappingURL=index.js.map

package.json

 {
   "name": "scroll-into-view-if-needed",
-  "version": "3.0.10",
+  "version": "3.1.0",
   "description": "Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center",
@@ -5,0 +5,0 @@ "keywords": [

src/index.ts

@@ -74,2 +74,12 @@ import { compute } from 'compute-scroll-into-view'
 
+const getScrollMargins = (target: Element) => {
+  const computedStyle = window.getComputedStyle(target)
+  return {
+    top: parseFloat(computedStyle.scrollMarginTop) || 0,
+    right: parseFloat(computedStyle.scrollMarginRight) || 0,
+    bottom: parseFloat(computedStyle.scrollMarginBottom) || 0,
+    left: parseFloat(computedStyle.scrollMarginLeft) || 0,
+  }
+}
+
 // Determine if the element is part of the document (including shadow dom)
@@ -131,2 +141,4 @@ // Derived from code of Andy Desmarais
 
+  const margins = getScrollMargins(target)
+
   if (isCustomScrollBehavior<T>(options)) {
@@ -139,3 +151,5 @@ return options.behavior(compute(target, options))
   for (const { el, top, left } of compute(target, getOptions(options))) {
-    el.scroll({ top, left, behavior })
+    const adjustedTop = top - margins.top + margins.bottom
+    const adjustedLeft = left - margins.left + margins.right
+    el.scroll({ top: adjustedTop, left: adjustedLeft, behavior })
   }
@@ -142,0 +156,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

44784

7.89%

Lines of code

244

6.09%

No dependency changes