Merge pull request #125 from taion/subclass

Expose scrollToTarget and document subclasses

README.md

@@ -96,6 +96,40 @@ scrollBehavior.registerScrollElement(
 
 To unregister an element, call the `unregisterElement` method with the key used to register that element.
 
+### Further scroll behavior customization
+
+If you need to further customize scrolling behavior, subclass the `ScrollBehavior` class, then override methods as needed. For example, with the appropriate polyfill, you can override `scrollToTarget` to use smooth scrolling for `window`.
+
+```js
+class SmoothScrollBehavior extends ScrollBehavior {
+  scrollToTarget(element, target) {
+    if (element !== window) {
+      super.scrollToTarget(element, target);
+      return;
+    }
+
+    if (typeof target === 'string') {
+      const targetElement = (
+        document.getElementById(target) ||
+        document.getElementsByName(target)[0]
+      );
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: 'smooth' });
+        return;
+      }
+
+      // Fallback to scrolling to top when target fragment doesn't exist.
+      target = [0, 0]; // eslint-disable-line no-param-reassign
+    }
+
+    const [left, top] = target;
+    window.scrollTo({ left, top, behavior: 'smooth' });
+  }
+}
+```
+
+Integrations should accept a `createScrollBehavior` callback that can create an instance of a custom scroll behavior class.
+
 [build-badge]: https://img.shields.io/travis/taion/scroll-behavior/master.svg
 [build]: https://travis-ci.org/taion/scroll-behavior
 

src/index.js

@@ -202,7 +202,7 @@ export default class ScrollBehavior {
 
     // Unlike with the window, there shouldn't be any flakiness to deal with
     // here.
-    this._scrollToTarget(element, scrollTarget);
+    this.scrollToTarget(element, scrollTarget);
   }
 
   _getDefaultScrollTarget(location) {
@@ -252,7 +252,7 @@ export default class ScrollBehavior {
       return;
     }
 
-    this._scrollToTarget(window, this._windowScrollTarget);
+    this.scrollToTarget(window, this._windowScrollTarget);
 
     ++this._numWindowScrollAttempts;
 
@@ -267,23 +267,23 @@ export default class ScrollBehavior {
     );
   };
 
-  _scrollToTarget = (element, target) => {
+  scrollToTarget(element, target) {
     if (typeof target === 'string') {
-      const el = (
+      const targetElement = (
         document.getElementById(target) ||
         document.getElementsByName(target)[0]
       );
-      if (el) {
-        el.scrollIntoView();
+      if (targetElement) {
+        targetElement.scrollIntoView();
         return;
       }
 
       // Fallback to scrolling to top when target fragment doesn't exist.
       target = [0, 0]; // eslint-disable-line no-param-reassign
     }
 
-    const [x, y] = target;
-    scrollLeft(element, x);
-    scrollTop(element, y);
+    const [left, top] = target;
+    scrollLeft(element, left);
+    scrollTop(element, top);
   }
 }

test/run.js

@@ -1,6 +1,6 @@
 export function delay(cb) {
   // Give throttled scroll listeners time to settle down.
-  setTimeout(cb, 60);
+  requestAnimationFrame(() => requestAnimationFrame(cb));
 }
 
 export default function run(history, steps) {