Remove JavaScript scrollLock in favor of CSS scroll-snap property

README.md

@@ -92,9 +92,6 @@ new Glider(document.querySelector('.glider'), {
 
   // Force centering slide after scroll event
   scrollLock: false,
-  // how long to wait after scroll event before locking
-  // if too low, it might interrupt normal scrolling
-  scrollLockDelay: 150,
 
   // Force centering slide after resize event
   resizeLock: true,

docs/assets/css/main.css

@@ -4551,4 +4551,11 @@ user-select: none; /* Standard */
   #glider-persp {
     overflow: hidden;
   }
-}
+}
+.scroll-lock {
+  scroll-snap-type: x mandatory;
+  scroll-padding: 0;
+}
+.scroll-lock .glider-slide {
+  scroll-snap-align: start;
+}

docs/index.html

@@ -889,12 +889,6 @@ <h2>Settings</h2>
             <span class="type default">Default:</span> false<br>
             If true, Glider.js will scroll to the nearest slide after any scroll interactions
           </li>
-          <li>
-            <span class="setting-name">scrollLockDelay</span><br>
-            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br>
-            <span class="type default">Default:</span> 250<br>
-            When <code class="slim slimmer">scrollLock</code> is set, this is the delay in milliseconds to wait before the scroll happens
-          </li>
           <li>
             <span class="setting-name">resizeLock</span><br>
             <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>

glider.css

@@ -45,7 +45,8 @@
   opacity: 0;
   height: 0;
 }
-.glider-prev,.glider-next {
+.glider-prev,
+.glider-next {
   user-select: none;
   position: absolute;
   outline: none;
@@ -61,8 +62,8 @@
   color: #666;
   opacity: 1;
   line-height: 1;
-  transition: opacity .5s cubic-bezier(.17,.67,.83,.67),
-              color .5s cubic-bezier(.17,.67,.83,.67);
+  transition: opacity 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67),
+    color 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
 }
 .glider-prev:hover,
 .glider-next:hover,
@@ -76,7 +77,7 @@
 }
 .glider-next.disabled,
 .glider-prev.disabled {
-  opacity: .25;
+  opacity: 0.25;
   color: #666;
   cursor: default;
 }
@@ -113,7 +114,7 @@
 .glider-dot.active {
   background: #a89cc8;
 }
-@media(max-width: 36em){
+@media (max-width: 36em) {
   .glider::-webkit-scrollbar {
     opacity: 1;
     -webkit-appearance: none;
@@ -124,6 +125,13 @@
     opacity: 1;
     border-radius: 99px;
     background-color: rgba(156, 156, 156, 0.25);
-    box-shadow: 0 0 1px rgba(255,255,255,.25);
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);
   }
 }
+.scroll-lock {
+  scroll-snap-type: x mandatory;
+  scroll-padding: 0;
+}
+.scroll-lock .glider-slide {
+  scroll-snap-align: start;
+}

glider.js

@@ -77,6 +77,10 @@
 
     _.track.classList.add('glider-track')
 
+    if (_.opt.scrollLock) {
+      _.ele.classList.add('scroll-lock')
+    }
+
     // start glider
     _.init()
 
@@ -356,22 +360,6 @@
         dot.classList.toggle('active', _.page === index)
       })
     }
-
-    if (event && _.opt.scrollLock) {
-      clearTimeout(_.scrollLock)
-      _.scrollLock = setTimeout(function () {
-        clearTimeout(_.scrollLock)
-        // dont attempt to scroll less than a pixel fraction - causes looping
-        if (Math.abs(_.ele.scrollLeft / _.itemWidth - _.slide) > 0.02) {
-          if (!_.mouseDown) {
-            // Only scroll if not at the end (#94)
-            if (_.trackWidth > _.containerWidth + _.ele.scrollLeft) {
-              _.scrollItem(_.getCurrentSlide())
-            }
-          }
-        }
-      }, _.opt.scrollLockDelay || 250)
-    }
   }
 
   gliderPrototype.getCurrentSlide = function () {

yarn.lock

@@ -349,11 +349,6 @@ commander@^2.14.1, commander@^2.9.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@~2.17.1:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
-  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
-
 component-emitter@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
@@ -2404,11 +2399,6 @@ source-map@^0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -2633,13 +2623,10 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-uglify-js@^3.4.9:
-  version "3.4.9"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
-  integrity sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==
-  dependencies:
-    commander "~2.17.1"
-    source-map "~0.6.1"
+uglify-js@^3.15.3:
+  version "3.17.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c"
+  integrity sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==
 
 union-value@^1.0.0:
   version "1.0.0"