update base

README.md

@@ -1,6 +1,17 @@
 [![](https://img.shields.io/npm/v/locomotive-scroll)](https://www.npmjs.com/package/locomotive-scroll)
 [![](https://img.shields.io/npm/dm/locomotive-scroll)](https://www.npmjs.com/package/locomotive-scroll)
 
+> 🚀 **Locomotive Scroll v5 Beta Release**
+>
+> Try out the beta version of Locomotive Scroll v5!
+>
+> 🔗 [Click here to try Locomotive Scroll v5 Beta](https://github.com/locomotivemtl/locomotive-scroll/tree/v5-beta)
+>
+> Your feedback is valuable during this beta testing phase. If you encounter any issues or have suggestions, please [open an issue](https://github.com/locomotivemtl/locomotive-scroll/issues/new?labels=v5&template=bug_report.md).
+>
+> Happy scrolling! 😄
+
+
 <p align="center">
     <a href="https://github.com/locomotivemtl/locomotive-scroll">
         <img src="https://user-images.githubusercontent.com/4596862/58807621-67aeec00-85e6-11e9-8e3a-3fe4123ee76c.png" height="140">
@@ -11,6 +22,8 @@
 
 ## Installation
 
+> ⚠️ Scroll-hijacking is a controversial practice that can cause usability, accessibility, and performance issues. Please use responsibly.
+
 ```sh
 npm install locomotive-scroll
 ```
@@ -179,7 +192,7 @@ scroll.on('call', func => {
 | `destroy()`                | Destroys the scroll events.    |                                                                                 |
 | `start()`                  | Restarts the scroll events.    |                                                                                 |
 | `stop()`                   | Stops the scroll events.       |                                                                                 |
-| `scrollTo(target, options)`| Scroll to a target.            | <div>`target`: Defines where you want to scroll. Available values types are :<ul><li>`node` : a dom element</li><li>`string` : you can type your own selector, or use values `"top"` and `"bottom"` to reach scroll boundaries</li><li>`int` : An absolute scroll coordinate in pixels</li></ul></div><div>`options` (optional, _object_) : Settings object. Available values are: <ul><li>`offset` (_integer_) : Defines an offset from your target. E.g. `-100` if you want to scroll 100 pixels above your target</li><li>`callback` (_function_) : Called when scrollTo completes (note that it won't wait for lerp to stabilize)</li><li>`duration` (_integer_) : Defines the duration of the scroll animation in milliseconds. Defaults to `1000`<br>![Smooth only][smooth-only]</li><li>`easing` (_array_) : An `array` of 4 floats between 0 and 1 defining the bezier curve for the animation's easing. <br>Defaults to `[0.25, 0.00, 0.35, 1.00]`<br>See [http://greweb.me/bezier-easing-editor/example/](http://greweb.me/bezier-easing-editor/example/)<br>*Keep in mind this will also be affected by the lerp unless you set `disableLerp` to `true`*.<br>![Smooth only][smooth-only]</li><li>`disableLerp` (_boolean_) : Lerp effect won't be applied if set to `true`<br>![Smooth only][smooth-only]</li></ul> |
+| `scrollTo(target, options)`| Scroll to a target.            | <div>`target`: Defines where you want to scroll. Available values types are :<ul><li>`node` : a dom element</li><li>`string` : you can type your own selector, or use values `"top"` and `"bottom"` to reach scroll boundaries</li><li>`int` : An absolute scroll coordinate in pixels</li></ul></div><div>`options` (optional, _object_) : Settings object. Available values are: <ul><li>`offset` (_integer_) : Defines an offset from your target. E.g. `-100` if you want to scroll 100 pixels above your target</li><li>`callback` (_function_) : Called when scrollTo completes (note that it won't wait for lerp to stabilize)</li><li>`duration` (_integer_) : Defines the duration of the scroll animation in milliseconds. Defaults to `1000`<br>![Smooth only][smooth-only]</li><li>`easing` (_array_) : An `array` of 4 floats between 0 and 1 defining the bezier curve for the animation's easing. <br>Defaults to `[0.25, 0.00, 0.35, 1.00]`<br>See [https://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation](https://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation)<br>*Keep in mind this will also be affected by the lerp unless you set `disableLerp` to `true`*.<br>![Smooth only][smooth-only]</li><li>`disableLerp` (_boolean_) : Lerp effect won't be applied if set to `true`<br>![Smooth only][smooth-only]</li></ul> |
 
 ## Instance events
 
@@ -205,7 +218,7 @@ scroll.on('scroll', (args) => {
         // ouput log example: 0.34
         // gsap example : myGsapAnimation.progress(progress);
     }
-}
+});
 ```
 
 
@@ -232,7 +245,7 @@ You can use your own or include these before our script.
 
 ```html
 <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>
+<script nomodule src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>
 ```
 
 ## Who's using Locomotive Scroll?

build/styles.js

@@ -1,13 +1,16 @@
 import gulp from 'gulp';
-import sass from 'gulp-sass';
+import gulpSass from 'gulp-sass';
 import autoprefixer from 'gulp-autoprefixer';
 import header from 'gulp-header';
 import merge from 'merge-stream';
+import nodeSass from 'node-sass';
 import paths from '../mconfig.json';
 import pkg from '../package.json';
 import error from './error.js';
 import { server } from './serve.js';
 
+const sass = gulpSass(nodeSass);
+
 function styles() {
     const files = [
         {
@@ -23,10 +26,9 @@ function styles() {
     const streams = files.map((file) => {
         return gulp
             .src(file.src + '**/*.scss')
-            .pipe(sass())
-            .on('error', function(err) {
+            .pipe(sass().on('error', function (err) {
                 error(this, err, 'stack');
-            })
+            }))
             .pipe(autoprefixer({
                 cascade: false
             }))

dist/locomotive-scroll.css

@@ -1,4 +1,4 @@
-/*! locomotive-scroll v4.1.1 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
+/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
 html.has-scroll-smooth {
   overflow: hidden; }
 

dist/locomotive-scroll.esm.js

@@ -1,4 +1,4 @@
-/* locomotive-scroll v4.1.1 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
+/* locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -1340,7 +1340,7 @@ var _default$1 = /*#__PURE__*/function (_Core) {
 
       window.scrollTo({
         top: offset,
-        behavior: 'smooth'
+        behavior: options.duration === 0 ? 'auto' : 'smooth'
       });
     }
   }, {
@@ -2153,6 +2153,9 @@ var _default$2 = /*#__PURE__*/function (_Core) {
     key: "stopScrolling",
     value: function stopScrolling() {
       cancelAnimationFrame(this.checkScrollRaf); // Prevent checkScroll to continue looping
+      //Pevent scrollbar glitch/locking
+
+      this.startScrollTs = undefined;
 
       if (this.scrollToRaf) {
         cancelAnimationFrame(this.scrollToRaf);
@@ -2202,11 +2205,17 @@ var _default$2 = /*#__PURE__*/function (_Core) {
           break;
 
         case keyCodes$1.UP:
-          this.instance.delta[this.directionAxis] -= 240;
+          if (this.isActiveElementScrollSensitive()) {
+            this.instance.delta[this.directionAxis] -= 240;
+          }
+
           break;
 
         case keyCodes$1.DOWN:
-          this.instance.delta[this.directionAxis] += 240;
+          if (this.isActiveElementScrollSensitive()) {
+            this.instance.delta[this.directionAxis] += 240;
+          }
+
           break;
 
         case keyCodes$1.PAGEUP:
@@ -2226,7 +2235,7 @@ var _default$2 = /*#__PURE__*/function (_Core) {
           break;
 
         case keyCodes$1.SPACE:
-          if (!(document.activeElement instanceof HTMLInputElement) && !(document.activeElement instanceof HTMLTextAreaElement)) {
+          if (this.isActiveElementScrollSensitive()) {
             if (e.shiftKey) {
               this.instance.delta[this.directionAxis] -= window.innerHeight;
             } else {
@@ -2248,6 +2257,11 @@ var _default$2 = /*#__PURE__*/function (_Core) {
       this.checkScroll();
       this.html.classList.add(this.scrollingClass);
     }
+  }, {
+    key: "isActiveElementScrollSensitive",
+    value: function isActiveElementScrollSensitive() {
+      return !(document.activeElement instanceof HTMLInputElement) && !(document.activeElement instanceof HTMLTextAreaElement) && !(document.activeElement instanceof HTMLButtonElement) && !(document.activeElement instanceof HTMLSelectElement);
+    }
   }, {
     key: "checkScroll",
     value: function checkScroll() {
@@ -2511,7 +2525,11 @@ var _default$2 = /*#__PURE__*/function (_Core) {
     key: "releaseScrollBar",
     value: function releaseScrollBar(e) {
       this.isDraggingScrollbar = false;
-      this.html.classList.add(this.scrollingClass);
+
+      if (this.isScrolling) {
+        this.html.classList.add(this.scrollingClass);
+      }
+
       this.html.classList.remove(this.draggingClass);
     }
   }, {

dist/locomotive-scroll.js

@@ -1,4 +1,4 @@
-/* locomotive-scroll v4.1.1 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
+/* locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -1346,7 +1346,7 @@
 
         window.scrollTo({
           top: offset,
-          behavior: 'smooth'
+          behavior: options.duration === 0 ? 'auto' : 'smooth'
         });
       }
     }, {
@@ -2159,6 +2159,9 @@
       key: "stopScrolling",
       value: function stopScrolling() {
         cancelAnimationFrame(this.checkScrollRaf); // Prevent checkScroll to continue looping
+        //Pevent scrollbar glitch/locking
+
+        this.startScrollTs = undefined;
 
         if (this.scrollToRaf) {
           cancelAnimationFrame(this.scrollToRaf);
@@ -2208,11 +2211,17 @@
             break;
 
           case keyCodes$1.UP:
-            this.instance.delta[this.directionAxis] -= 240;
+            if (this.isActiveElementScrollSensitive()) {
+              this.instance.delta[this.directionAxis] -= 240;
+            }
+
             break;
 
           case keyCodes$1.DOWN:
-            this.instance.delta[this.directionAxis] += 240;
+            if (this.isActiveElementScrollSensitive()) {
+              this.instance.delta[this.directionAxis] += 240;
+            }
+
             break;
 
           case keyCodes$1.PAGEUP:
@@ -2232,7 +2241,7 @@
             break;
 
           case keyCodes$1.SPACE:
-            if (!(document.activeElement instanceof HTMLInputElement) && !(document.activeElement instanceof HTMLTextAreaElement)) {
+            if (this.isActiveElementScrollSensitive()) {
               if (e.shiftKey) {
                 this.instance.delta[this.directionAxis] -= window.innerHeight;
               } else {
@@ -2254,6 +2263,11 @@
         this.checkScroll();
         this.html.classList.add(this.scrollingClass);
       }
+    }, {
+      key: "isActiveElementScrollSensitive",
+      value: function isActiveElementScrollSensitive() {
+        return !(document.activeElement instanceof HTMLInputElement) && !(document.activeElement instanceof HTMLTextAreaElement) && !(document.activeElement instanceof HTMLButtonElement) && !(document.activeElement instanceof HTMLSelectElement);
+      }
     }, {
       key: "checkScroll",
       value: function checkScroll() {
@@ -2517,7 +2531,11 @@
       key: "releaseScrollBar",
       value: function releaseScrollBar(e) {
         this.isDraggingScrollbar = false;
-        this.html.classList.add(this.scrollingClass);
+
+        if (this.isScrolling) {
+          this.html.classList.add(this.scrollingClass);
+        }
+
         this.html.classList.remove(this.draggingClass);
       }
     }, {

docs/horizontal.html

@@ -74,7 +74,7 @@ <h1>
         </div>
 
         <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>
+        <script nomodule src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>
 
         <script src="dist/scripts/main.js"></script>
     </body>

docs/index.html

@@ -34,15 +34,15 @@
                             <div class="o-layout">
                                 <div class="o-layout_item u-1/2" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-2" data-scroll-position="top" data-scroll-target="#header">
                                     <span class="u-label c-header_heading_label">
-                                        <a href="/">
+                                        <a href="https://locomotive.ca" target="_blank" rel="noopener noreferrer">
                                             Locomotive.ca
                                         </a>
                                     </span>
                                 </div>
                                 <div class="o-layout_item u-1/2" data-scroll data-scroll-direction="horizontal" data-scroll-speed="2" data-scroll-position="top" data-scroll-target="#header">
                                     <div class="u-text-right">
                                         <p class="u-label c-header_heading_label">
-                                            v4 – Edition
+                                            v4.x – Edition
                                         </p>
                                     </div>
                                 </div>
@@ -56,7 +56,7 @@ <h1 class="c-header_title o-h1" data-scroll>
                                 <span data-scroll data-scroll-speed="2" data-scroll-position="top">Scroll</span>
                             </span>
                             <span class="c-header_title_line -version u-white">
-                                <span class="o-h1" data-scroll data-scroll-speed="3" data-scroll-position="top" data-scroll-delay="0.05">v</span><span class="o-h1" data-scroll data-scroll-speed="5" data-scroll-position="top" data-scroll-delay="0.05">4</span><span class="o-h1" data-scroll data-scroll-speed="2" data-scroll-position="top" data-scroll-delay="0.05">.</span><span class="o-h1" data-scroll data-scroll-speed="4" data-scroll-position="top" data-scroll-delay="0.05">0</span>
+                                <span class="o-h1" data-scroll data-scroll-speed="3" data-scroll-position="top" data-scroll-delay="0.05">v</span><span class="o-h1" data-scroll data-scroll-speed="5" data-scroll-position="top" data-scroll-delay="0.05">4</span><span class="o-h1" data-scroll data-scroll-speed="2" data-scroll-position="top" data-scroll-delay="0.05">.</span><span class="o-h1" data-scroll data-scroll-speed="4" data-scroll-position="top" data-scroll-delay="0.05">X</span>
                             </span>
                         </h1>
                         <hr class="c-header_line" data-scroll data-scroll-offset="100" />
@@ -451,7 +451,7 @@ <h1 class="o-title" data-scroll>
         </div>
 
         <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>
+        <script nomodule src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>
 
         <script src="dist/scripts/main.js"></script>
     </body>