@livelybone/scroll-get - npm Package Compare versions

Comparing version 4.0.1 to 5.0.0

index.d.ts

@@ -45,19 +45,86 @@ declare function getRect(el: Element): DOMRect
 /**
+ * 获取元素的可能达到的最大的 scrollTop 值
+ *
+ * Gets the maximum possible scrollTop value for the element
+ * */
+declare function getMaxScrollTop(el: HTMLElement): number
+
+/**
+ * 向上遍历元素的祖先，获取第一个滚动的祖先元素
+ *
+ * Traverse up the ancestor of the element to get the first scrolling ancestor element
+ * */
+declare function getScrollParent($el: HTMLElement): HTMLElement | undefined
+
+interface ScrollToElementOptions {
+  /**
+   * Interval
+   *
+   * Default: 300
+   * */
+  time: number
+  /**
+   * Whether affect the scrollParent, when it is true the scrollParent will also scroll to the visible area
+   * */
+  affectParent?: boolean
+  /**
+   * RateFactor
+   * */
+  rateFactor?: RateFactor
+  offset?: number
+}
+
+/**
  * @param el                The target element you want scroll to
- * @param [time]            Interval
- * @param [affectParent]    Whether affect the parentElement, when it is true the parentElement will also scroll to the visible area
- * @param [rateFactor]      RateFactor
+ * @param [options]         ScrollToElementOptions
  * */
 declare function scrollToElement(
   el: HTMLElement,
-  time?: number,
-  affectParent?: boolean,
-  rateFactor?: RateFactor,
+  options?: ScrollToElementOptions,
 ): Promise<void>
 
+interface ElementInfo {
+  element: HTMLElement
+  /**
+   * @prop areaHeight       元素对应区域的高度，这里认为一个元素对应的区域的高度等于该元素到它在页面上临近的下一个元素的距离加本身的高度
+   * @prop viewAreaHeight   元素对应可视区域的高度，在页面上可以被看到的高度
+   * @prop viewPercent      viewAreaHeight / areaHeight
+   *
+   * @prop areaHeight       The height of an element's area, which is considered to be equal to the distance from the element to its next adjacent element on the page plus the height of the element itself
+   * @prop viewAreaHeight   The height of the visible area of the element on the page
+   * @prop viewPercent      viewAreaHeight / areaHeight
+   * */
+  rect: DOMRect & {
+    areaHeight: number
+    viewAreaHeight: number
+    viewPercent: number
+  }
+}
+
+/**
+ * @param viewElements   当前可见区域代表的元素，通过对比各自排序
+ * */
+declare type GetViewElementsWhenScrollCb = (
+  viewElements: ElementInfo[],
+  scrollParentRect: DOMRect,
+  ev?: Event,
+) => any
+
+declare function getViewElementsWhenScroll(
+  scrollElement: HTMLElement,
+  targetElements: HTMLElement[],
+  cb: GetViewElementsWhenScrollCb,
+): () => void
+
 export {
+  ElementInfo,
+  GetViewElementsWhenScrollCb,
   RateFactor,
+  ScrollToElementOptions,
   animation,
+  getMaxScrollTop,
   getNativeScrollbarWidth,
   getRect,
+  getScrollParent,
+  getViewElementsWhenScroll,
   posRelativeToClient,
@@ -64,0 +131,0 @@ posRelativeToPage,

lib/es/index.js

 /**
  * Bundle of @livelybone/scroll-get
- * Generated: 2019-12-02
- * Version: 4.0.1
+ * Generated: 2020-02-06
+ * Version: 5.0.0
  * License: MIT
@@ -114,22 +114,67 @@ * Author: [e-mail]
 /**
- * @param el                The target element you want scroll to
- * @param [time]            Interval
- * @param [affectParent]    Whether affect the parentElement, when it is true the parentElement will also scroll to the visible area
- * @param [rateFactor]      RateFactor
+ * 获取元素的可能达到的最大的 scrollTop 值
+ *
+ * Gets the maximum possible scrollTop value for the element
  * */
 
-function scrollToElement(el) {
-  var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
-  var affectParent = arguments.length > 2 ? arguments[2] : undefined;
-  var rateFactor = arguments.length > 3 ? arguments[3] : undefined;
+function getMaxScrollTop(el) {
+  var lastChild = el.children[el.children.length - 1];
 
-  var getMaxScrollTop = function getMaxScrollTop($el) {
-    return $el.scrollHeight - $el.clientHeight;
+  var getStyle = function getStyle($el) {
+    if ($el) {
+      // @ts-ignore
+      return getComputedStyle ? getComputedStyle($el) : $el.currentStyle;
+    }
+
+    return undefined;
   };
 
-  if (el.parentElement) {
-    var parentElement = el.parentElement;
+  var getMaxExceedMarginBottom = function getMaxExceedMarginBottom($el) {
+    var lastMarginBottom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var style = getStyle($el);
+    if (style && style.display === 'block') return getMaxExceedMarginBottom($el.children[$el.children.length - 1], Math.max(lastMarginBottom, parseInt(style.marginBottom, 10)));
+    return lastMarginBottom;
+  };
 
+  var marginBottom = getMaxExceedMarginBottom(lastChild);
+  return Math.max(0, el.scrollHeight - el.clientHeight - marginBottom);
+}
+/**
+ * 向上遍历元素的祖先，获取第一个滚动的祖先元素
+ *
+ * Traverse up the ancestor of the element to get the first scrolling ancestor element
+ * */
+
+function getScrollParent($el) {
+  if ($el.parentElement) {
+    var scrollParent = $el.parentElement;
+    if (getMaxScrollTop(scrollParent)) return scrollParent;
+    return getScrollParent(scrollParent);
+  }
+
+  return undefined;
+}
+
+/**
+ * @param el                The target element you want scroll to
+ * @param [options]         ScrollToElementOptions
+ * */
+function scrollToElement(el, options) {
+  var _ref = options || {},
+      affectParent = _ref.affectParent,
+      rateFactor = _ref.rateFactor,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 0 : _ref$offset,
+      _ref$time = _ref.time,
+      time = _ref$time === void 0 ? 300 : _ref$time;
+
+  var scrollParent = getScrollParent(el);
+
+  if (scrollParent) {
     var parentScroll = function parentScroll() {
-      return scrollToElement(parentElement, time);
+      return scrollToElement(scrollParent, {
+        time: time,
+        affectParent: affectParent,
+        rateFactor: rateFactor
+      });
     };
@@ -140,3 +185,3 @@
 
-    if (parentElement === document.body) {
+    if (scrollParent === document.body) {
       maxScrollTop = getMaxScrollTop(document.body);
@@ -147,16 +192,16 @@ scrollTop = document.body.scrollTop;
         maxScrollTop = getMaxScrollTop(document.documentElement);
-        parentElement = document.documentElement;
+        scrollParent = document.documentElement;
         scrollTop = document.documentElement.scrollTop;
       }
     } else {
-      maxScrollTop = getMaxScrollTop(parentElement);
-      scrollTop = parentElement.scrollTop;
+      maxScrollTop = getMaxScrollTop(scrollParent);
+      scrollTop = scrollParent.scrollTop;
     }
 
-    var offsetTop = getRect(el).top - getRect(parentElement).top;
-    var delta = Math.min(offsetTop, maxScrollTop);
+    var offsetTop = getRect(el).top - getRect(scrollParent).top;
+    var delta = Math.min(offsetTop + offset, maxScrollTop);
 
     if (delta && offsetTop && maxScrollTop > 0) {
       return animation(time, function (rate) {
-        parentElement.scrollTop = scrollTop + delta * rate;
+        scrollParent.scrollTop = scrollTop + delta * rate;
       }, rateFactor).then(affectParent ? parentScroll : null);
@@ -172,3 +217,48 @@ }
 }
+function getViewElementsWhenScroll(scrollElement, targetElements, cb) {
+  if (targetElements.length > 0) {
+    var oldEl = []; // 排序：比较元素位置
 
-export { animation, getNativeScrollbarWidth, getRect, posRelativeToClient, posRelativeToPage, scrollToElement };
+    targetElements.sort(function (a, b) {
+      return getRect(a).top - getRect(b).top;
+    });
+
+    var scroll = function scroll(ev) {
+      var scrollRect = getRect(scrollElement);
+      var elementsRect = targetElements.map(getRect); // 重新计算元素当前的区域高度及可见区域高度
+
+      var rects = elementsRect.map(function (rect, i) {
+        var $rect = rect;
+        $rect.areaHeight = i !== elementsRect.length - 1 ? elementsRect[i + 1].top - $rect.top : $rect.height;
+        $rect.viewAreaHeight = Math.max(0, scrollRect.height + $rect.areaHeight - (Math.max($rect.top + $rect.areaHeight, scrollRect.top + scrollRect.height) - Math.min(scrollRect.top, $rect.top)));
+        $rect.viewPercent = $rect.viewAreaHeight / $rect.areaHeight;
+        return {
+          rect: $rect,
+          element: targetElements[i]
+        };
+      }); // 通过比较各自当前的可见区域的大小获得当前的最近元素
+
+      var viewElements = rects.sort(function (a, b) {
+        return b.rect.viewPercent - a.rect.viewPercent;
+      }).filter(function (el) {
+        return el.rect.viewPercent > 0;
+      });
+
+      if (viewElements.length !== oldEl.length || viewElements.some(function (el, i) {
+        return el.element !== oldEl[i].element;
+      })) {
+        cb(oldEl = viewElements, scrollRect, ev);
+      }
+    };
+
+    scroll();
+    scrollElement.addEventListener('scroll', scroll);
+    return function () {
+      return scrollElement.removeEventListener('scroll', scroll);
+    };
+  }
+
+  return function () {};
+}
+
+export { animation, getMaxScrollTop, getNativeScrollbarWidth, getRect, getScrollParent, getViewElementsWhenScroll, posRelativeToClient, posRelativeToPage, scrollToElement };

lib/umd/index.js

 /**
  * Bundle of @livelybone/scroll-get
- * Generated: 2019-12-02
- * Version: 4.0.1
+ * Generated: 2020-02-06
+ * Version: 5.0.0
  * License: MIT
@@ -9,2 +9,2 @@ * Author: [e-mail]
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ScrollGet={})}(this,function(e){"use strict";function p(e){return e.getBoundingClientRect()}function t(e){return e+(1-e)*e}function m(o,i,e){var r=e||t;return new Promise(function(t){var n=Date.now();!function e(t){window.requestAnimationFrame(function(){t()&&e(t)})}(function(){var e=r(Math.min(1,(Date.now()-n)/o));return i(e),!(1<=e)||(t(),!1)})})}e.animation=m,e.getNativeScrollbarWidth=function(e){var t=e||window,n=t===window;try{var o=n?window.nativeScrollbarWidth:null;if(!o||"number"!=typeof o.y||"number"!=typeof o.x){var i=n?document.createElement("div"):t;n&&(i.setAttribute("style","position:fixed;top:0;left:0;opacity:0;pointer-events:none;width:200px;height:200px;overflow:scroll"),document.body.appendChild(i)),o={y:i.offsetWidth-i.clientWidth,x:i.offsetHeight-i.clientHeight},n&&(window.nativeScrollbarWidth=o,document.body.removeChild(i))}return o}catch(e){return{y:17,x:17}}},e.getRect=p,e.posRelativeToClient=function(e){var t=p(e);return{clientLeft:t.left,clientTop:t.top}},e.posRelativeToPage=function(e){for(var t={pageLeft:0,pageTop:0},n=e;n;)t.pageLeft+=n.offsetLeft,t.pageTop+=n.offsetTop,n=n.offsetParent;return t},e.scrollToElement=function e(t){function n(e){return e.scrollHeight-e.clientHeight}var o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:300,i=2<arguments.length?arguments[2]:void 0,r=3<arguments.length?arguments[3]:void 0;if(t.parentElement){var l,c,u=t.parentElement,f=function(){return e(u,o)};u===document.body?(l=n(document.body),c=document.body.scrollTop,l||(l=n(document.documentElement),u=document.documentElement,c=document.documentElement.scrollTop)):(l=n(u),c=u.scrollTop);var d=p(t).top-p(u).top,a=Math.min(d,l);if(a&&d&&0<l)return m(o,function(e){u.scrollTop=c+a*e},r).then(i?f:null);if(i)return f()}return Promise.resolve()},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ScrollGet={})}(this,function(e){"use strict";function v(e){return e.getBoundingClientRect()}function t(e){return e+(1-e)*e}function g(r,o,e){var i=e||t;return new Promise(function(t){var n=Date.now();!function e(t){window.requestAnimationFrame(function(){t()&&e(t)})}(function(){var e=i(Math.min(1,(Date.now()-n)/r));return o(e),!(1<=e)||(t(),!1)})})}function w(e){var t=e.children[e.children.length-1],n=function e(t,n){var r=1<arguments.length&&void 0!==n?n:0,o=function(e){if(e)return getComputedStyle?getComputedStyle(e):e.currentStyle}(t);return o&&"block"===o.display?e(t.children[t.children.length-1],Math.max(r,parseInt(o.marginBottom,10))):r}(t);return Math.max(0,e.scrollHeight-e.clientHeight-n)}function y(e){if(e.parentElement){var t=e.parentElement;return w(t)?t:y(t)}}e.animation=g,e.getMaxScrollTop=w,e.getNativeScrollbarWidth=function(e){var t=e||window,n=t===window;try{var r=n?window.nativeScrollbarWidth:null;if(!r||"number"!=typeof r.y||"number"!=typeof r.x){var o=n?document.createElement("div"):t;n&&(o.setAttribute("style","position:fixed;top:0;left:0;opacity:0;pointer-events:none;width:200px;height:200px;overflow:scroll"),document.body.appendChild(o)),r={y:o.offsetWidth-o.clientWidth,x:o.offsetHeight-o.clientHeight},n&&(window.nativeScrollbarWidth=r,document.body.removeChild(o))}return r}catch(e){return{y:17,x:17}}},e.getRect=v,e.getScrollParent=y,e.getViewElementsWhenScroll=function(n,i,c){if(0<i.length){var l=[];i.sort(function(e,t){return v(e).top-v(t).top});var e=function(e){var r=v(n),o=i.map(v),t=o.map(function(e,t){var n=e;return n.areaHeight=t!==o.length-1?o[t+1].top-n.top:n.height,n.viewAreaHeight=Math.max(0,r.height+n.areaHeight-(Math.max(n.top+n.areaHeight,r.top+r.height)-Math.min(r.top,n.top))),n.viewPercent=n.viewAreaHeight/n.areaHeight,{rect:n,element:i[t]}}).sort(function(e,t){return t.rect.viewPercent-e.rect.viewPercent}).filter(function(e){return 0<e.rect.viewPercent});t.length===l.length&&!t.some(function(e,t){return e.element!==l[t].element})||c(l=t,r,e)};return e(),n.addEventListener("scroll",e),function(){return n.removeEventListener("scroll",e)}}return function(){}},e.posRelativeToClient=function(e){var t=v(e);return{clientLeft:t.left,clientTop:t.top}},e.posRelativeToPage=function(e){for(var t={pageLeft:0,pageTop:0},n=e;n;)t.pageLeft+=n.offsetLeft,t.pageTop+=n.offsetTop,n=n.offsetParent;return t},e.scrollToElement=function e(t,n){var r=n||{},o=r.affectParent,i=r.rateFactor,c=r.offset,l=void 0===c?0:c,a=r.time,u=void 0===a?300:a,f=y(t);if(f){var d,p,m=function(){return e(f,{time:u,affectParent:o,rateFactor:i})};f===document.body?(d=w(document.body),p=document.body.scrollTop,d||(d=w(document.documentElement),f=document.documentElement,p=document.documentElement.scrollTop)):(d=w(f),p=f.scrollTop);var h=v(t).top-v(f).top,s=Math.min(h+l,d);if(s&&h&&0<d)return g(u,function(e){f.scrollTop=p+s*e},i).then(o?m:null);if(o)return m()}return Promise.resolve()},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "@livelybone/scroll-get",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "Some useful tool of browser scroll, such as tool for calculating position relative to page/client, tool for getting the native scrollbar width...",
@@ -5,0 +5,0 @@ "main": "./lib/umd/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23448

increased by35.14%

Lines of code

358

increased by66.51%

No dependency changes