react-scroll - npm Package Compare versions

Comparing version 1.8.2 to 1.8.3

CHANGELOG.md

 #### Changelog
+>1.8.3
+- Fix for scroll offset [PR](https://github.com/fisshy/react-scroll/pull/469)
 > 1.8.1
@@ -3,0 +5,0 @@ - Better hash history

modules/mixins/Helpers.js

@@ -40,3 +40,4 @@ "use strict";
   ignoreCancelEvents: PropTypes.bool,
-  hashSpy: PropTypes.bool
+  hashSpy: PropTypes.bool,
+  spyThrottle: PropTypes.number
 };
@@ -90,3 +91,3 @@
             if (!scrollSpy.isMounted(scrollSpyContainer)) {
-              scrollSpy.mount(scrollSpyContainer);
+              scrollSpy.mount(scrollSpyContainer, this.props.spyThrottle);
             }
@@ -93,0 +94,0 @@

modules/mixins/scroll-link.js

@@ -57,3 +57,4 @@ 'use strict';
   hashSpy: _propTypes2.default.bool,
-  saveHashHistory: _propTypes2.default.bool
+  saveHashHistory: _propTypes2.default.bool,
+  spyThrottle: _propTypes2.default.number
 };
@@ -104,3 +105,3 @@
           if (!_scrollSpy2.default.isMounted(scrollSpyContainer)) {
-            _scrollSpy2.default.mount(scrollSpyContainer);
+            _scrollSpy2.default.mount(scrollSpyContainer, this.props.spyThrottle);
           }
@@ -107,0 +108,0 @@

modules/mixins/scroll-spy.js

@@ -15,5 +15,6 @@ 'use strict';
 
-// The eventHandler will execute at a rate of 15fps
+// The eventHandler will execute at a rate of 15fps by default
 var eventThrottler = function eventThrottler(eventHandler) {
-  return (0, _lodash2.default)(eventHandler, 66);
+  var throttleAmount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 66;
+  return (0, _lodash2.default)(eventHandler, throttleAmount);
 };
@@ -27,7 +28,7 @@
 
-  mount: function mount(scrollSpyContainer) {
+  mount: function mount(scrollSpyContainer, throttle) {
     if (scrollSpyContainer) {
       var eventHandler = eventThrottler(function (event) {
         scrollSpy.scrollHandler(scrollSpyContainer);
-      });
+      }, throttle);
       scrollSpy.scrollSpyContainers.push(scrollSpyContainer);
@@ -34,0 +35,0 @@ (0, _passiveEventListeners.addPassiveEventListener)(scrollSpyContainer, 'scroll', eventHandler);

modules/mixins/utils.js

@@ -24,2 +24,18 @@ "use strict";
 
+var isPositioned = function isPositioned(element) {
+  return getComputedStyle(element).position !== "static";
+};
+
+var getElementOffsetInfoUntil = function getElementOffsetInfoUntil(element, predicate) {
+  var offsetTop = element.offsetTop;
+  var currentOffsetParent = element.offsetParent;
+
+  while (currentOffsetParent && !predicate(currentOffsetParent)) {
+    offsetTop += currentOffsetParent.offsetTop;
+    currentOffsetParent = currentOffsetParent.offsetParent;
+  }
+
+  return { offsetTop: offsetTop, offsetParent: currentOffsetParent };
+};
+
 var scrollOffset = function scrollOffset(c, t, horizontal) {
@@ -29,5 +45,62 @@ if (horizontal) {
   } else {
-    return c === document ? t.getBoundingClientRect().top + (window.scrollY || window.pageYOffset) : getComputedStyle(c).position !== "static" ? t.offsetTop : t.offsetTop - c.offsetTop;
+    if (c === document) {
+      return t.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
+    }
+
+    // The offsetParent of an element, according to MDN, is its nearest positioned
+    // (an element whose position is anything other than static) ancestor. The offsetTop
+    // of an element is taken with respect to its offsetParent which may not neccessarily
+    // be its parentElement except the parent itself is positioned.
+
+    // So if containerElement is positioned, then it must be an offsetParent somewhere
+    // If it happens that targetElement is a descendant of the containerElement, and there
+    // is not intermediate positioned element between the two of them, i.e.
+    // targetElement"s offsetParent is the same as the containerElement, then the
+    // distance between the two will be the offsetTop of the targetElement.
+    // If, on the other hand, there are intermediate positioned elements between the
+    // two entities, the distance between the targetElement and the containerElement
+    // will be the accumulation of the offsetTop of the element and that of its
+    // subsequent offsetParent until the containerElement is reached, since it
+    // will also be an offsetParent at some point due to the fact that it is positioned.
+
+    // If the containerElement is not positioned, then it can"t be an offsetParent,
+    // which means that the offsetTop of the targetElement would not be with respect to it.
+    // However, if the two of them happen to have the same offsetParent, then
+    // the distance between them will be the difference between their offsetTop
+    // since they are both taken with respect to the same entity.
+    // The last resort would be to accumulate their offsetTop until a common
+    // offsetParent is reached (usually the document) and taking the difference
+    // between the accumulated offsetTops
+
+    if (isPositioned(c)) {
+      if (t.offsetParent !== c) {
+        var isContainerElementOrDocument = function isContainerElementOrDocument(e) {
+          return e === c || e === document;
+        };
+
+        var _getElementOffsetInfo = getElementOffsetInfoUntil(t, isContainerElementOrDocument),
+            offsetTop = _getElementOffsetInfo.offsetTop,
+            offsetParent = _getElementOffsetInfo.offsetParent;
+
+        if (offsetParent !== c) {
+          throw new Error("Seems containerElement is not an ancestor of the Element");
+        }
+
+        return offsetTop;
+      }
+
+      return t.offsetTop;
+    }
+
+    if (t.offsetParent === c.offsetParent) {
+      return t.offsetTop - c.offsetTop;
+    }
+
+    var isDocument = function isDocument(e) {
+      return e === document;
+    };
+    return getElementOffsetInfoUntil(t, isDocument).offsetTop - getElementOffsetInfoUntil(c, isDocument).offsetTop;
   }
 };
+
 exports.default = {
@@ -34,0 +107,0 @@ updateHash: updateHash,

package.json

 {
   "name": "react-scroll",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "A scroll component for React.js",
@@ -49,3 +49,3 @@ "main": "modules",
     "expect": "^1.20.2",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
@@ -52,0 +52,0 @@ "karma": "^1.7.1",

README.md

@@ -1,4 +0,4 @@
-## React Scroll
+<h1 align='center'> React Scroll</h1>
 
-Component for animating vertical scrolling.
+<p align='center'>React component for animating vertical scrolling
 
@@ -46,6 +46,7 @@ ### Install
 import * as Scroll from 'react-scroll';
-import { Link, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
+import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
 
 // Or Access Link,Element,etc as follows
 let Link      = Scroll.Link;
+let Button    = Scroll.Button;
 let Element   = Scroll.Element;
@@ -61,2 +62,3 @@ let Events    = Scroll.Events;
 var Link      = Scroll.Link;
+var Button    = Scroll.Button;
 var Element   = Scroll.Element;
@@ -163,28 +165,140 @@ var Events    = Scroll.Events;
 
-> activeClass - class applied when element is reached
+<table>
+<tr>
+<td>
+activeClass
+</td>
+<td>
+ class applied when element is reached
+</td>
+</tr>
+<tr>
+<td>
+to
+</td>
+<td>
+ Target to scroll to
+</td>
+</tr>
 
-> to - target to scroll to
 
-> containerId - container to listen for scroll events and to perform scrolling in 
+<tr>
+<td>
+containerId
+</td>
+<td>
+ Container to listen for scroll events and to perform scrolling in
+</td>
+</tr>
 
-> spy - make Link selected when scroll is at its targets position
+<tr>
+<td>
+spy
+</td>
+<td>
+ Make Link selected when scroll is at its targets position
+</td>
+</tr>
 
-> hashSpy - update hash based on spy, containerId has to be set to scroll a specific element.
+<tr>
+<td>
+hashSpy
+</td>
+<td>
+Update hash based on spy, containerId has to be set to scroll a specific element
+</td>
+</tr>
 
-> smooth - animate the scrolling
+<tr>
+<td>
+smooth
+</td>
+<td>
+Animate the scrolling
+</td>
+</tr>
 
-> offset - scroll additional px ( like padding )
+<tr>
+<td>
+offset
+</td>
+<td>
+Scroll additional px ( like padding )
+</td>
+</tr>
 
-> duration - time of the scroll animation - can be a number or a function (`function (scrollDistanceInPx) { return duration; }`), that allows more granular control at run-time
+<tr>
+<td>
+duration
+</td>
+<td>
+time of the scroll animation - can be a number or a function (`function (scrollDistanceInPx) { return duration; }`), that allows more granular control at run-time
+</td>
+</tr>
 
-> delay - wait x milliseconds before scroll
+<tr>
+<td>
+delay
+</td>
+<td>
+Wait x milliseconds before scroll</td>
+</tr>
 
-> isDynamic - in case the distance has to be recalculated - if you have content that expands etc.
+<tr>
+<td>
+isDynamic 
+</td>
+<td>
+In case the distance has to be recalculated - if you have content that expands etc.</td>
+</tr>
 
-> onSetActive - invoke whenever link is being set to active
+<tr>
+<td>
+onSetActive
+</td>
+<td>
+Invoke whenever link is being set to active
+</td>
+</tr>
 
-> onSetInactive - invoke whenever link is lose the active status
+<tr>
+<td>
+onSetInactive
+</td>
+<td>
+Invoke whenever link is lose the active status
+</td>
+</tr>
 
-> ignoreCancelEvents - ignores events which cancel animated scrolling
+<tr>
+<td>
+ignoreCancelEvents
+</td>
+<td>
+ Ignores events which cancel animated scrolling
+</td>
+</tr>
 
+<tr>
+<td>
+horizontal 
+</td>
+<td>
+ Whether to scroll vertically (`false`) or horizontally (`true`) - default: `false`
+</td>
+</tr>
+
+<tr>
+<td>
+spyThrottle 
+</td>
+<td>
+Time of the spy throttle - can be a number
+</td>
+</tr>
+
+</table>
+
+### Full example
+
 ```js
@@ -203,2 +317,3 @@ <Link activeClass="active"
       ignoreCancelEvents={false}
+      spyThrottle={500}
 >
@@ -205,0 +320,0 @@ Your name

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

241648

increased by94.26%

Number of package files

51

increased by88.89%

Lines of code

5160

increased by94.42%

Number of lines in readme file

491

increased by30.59%

No dependency changes