Update locomotive-scroll to v3: update scroll.js, add scrollbar css, remove copy task

assets/scripts/modules/Scroll.js

@@ -1,6 +1,5 @@
 import { module } from 'modujs';
-import { $document } from '../utils/environment'
-import ScrollManager from '../scroll/vendors/ScrollManager';
+import locomotiveScroll from 'locomotive-scroll';
 
 export default class extends module {
     constructor(m) {
@@ -8,10 +7,9 @@ export default class extends module {
     }
 
     init() {
-        this.scroll = new ScrollManager({
-            container: $(this.el),
-            smooth: true,
-            inertia: 1
+        this.scroll = new locomotiveScroll({
+            el: this.el,
+            smooth: true
         });
     }
 

assets/scripts/scroll/Scroll.js

@@ -1,26 +0,0 @@
-// ==========================================================================
-// Extended Locomotive Scroll
-// ==========================================================================
-/* jshint esnext: true */
-import Scroll, { EVENT_KEY as VENDOR_EVENT_KEY, EVENT as VENDOR_EVENTS, DEFAULTS as VENDOR_DEFAULTS } from './vendors/Scroll'
-
-/**
- * UNCOMMENT ONLY THE LINES YOU NEED
- */
-// import { $window, $document } from '../../utils/environment';
-// import debounce from '../../utils/debounce';
-// import { isNumeric } from '../../utils/is';
-
-export const EVENT_KEY = VENDOR_EVENT_KEY;
-
-export const EVENT = Object.assign(VENDOR_EVENTS, {
-    // TEST: `test.${EVENT_KEY}`
-});
-
-export const DEFAULTS = Object.assign(VENDOR_DEFAULTS, { });
-
-export default class extends Scroll {
-    constructor(options) {
-        super(options)
-    }
-}

assets/scripts/scroll/SmoothScroll.js

@@ -1,21 +0,0 @@
-// ==========================================================================
-// Extended Locomotive Smooth Scroll
-// ==========================================================================
-/* jshint esnext: true */
-import SmoothScroll from './vendors/SmoothScroll'
-
-/**
- * UNCOMMENT ONLY THE LINES YOU NEED
- */
-// import { $window, $document, $html } from '../utils/environment';
-// import Scroll, { DEFAULTS, EVENT } from './Scroll';
-
-// import debounce from '../utils/debounce';
-// import Scrollbar from 'smooth-scrollbar';
-// import { isNumeric } from '../utils/is';
-
-export default class extends SmoothScroll {
-    constructor(options) {
-        super(options)
-    }
-}

assets/styles/components/_scrollbar.scss

@@ -0,0 +1,34 @@
+.c-scrollbar {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 11px;
+    height: 100vh;
+    transform-origin: center right;
+    transition: transform 0.3s, opacity 0.3s;
+    opacity: 0;
+
+    &:hover {
+        transform: scaleX(1.45);
+    }
+
+    &:hover, .has-scroll-scrolling &, .has-scroll-dragging & {
+        opacity: 1;
+    }
+}
+
+.c-scrollbar_thumb {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: black;
+    opacity: 0.5;
+    width: 7px;
+    border-radius: 10px;
+    margin: 2px;
+    cursor: grab;
+
+    .has-scroll-dragging & {
+        cursor: grabbing;
+    }
+}

assets/styles/elements/_page.scss

@@ -50,6 +50,20 @@ html {
     &.is-loading {
         cursor: wait;
     }
+
+    &.has-scroll-smooth {
+        overflow: hidden;
+    }
+
+    &.has-scroll-dragging {
+        user-select: none;
+    }
+}
+
+body {
+    .has-scroll-smooth & {
+        overflow: hidden;
+    }
 }
 
 ::selection {

assets/styles/main.scss

@@ -39,7 +39,6 @@
 @import "objects/form";
 @import "objects/button";
 @import "objects/pjax";
-@import "objects/scroll";
 // @import "objects/crop";
 // @import "objects/table";
 
@@ -49,7 +48,7 @@
 
 // Components
 // ==========================================================================
-// @import "components/component";
+@import "components/scrollbar";
 
 // Templates
 // ==========================================================================

assets/styles/objects/_scroll.scss

@@ -1,63 +0,0 @@
-html.has-smooth-scroll {
-    overflow: hidden;
-}
-
-.o-scroll{
-    html.has-smooth-scroll & {
-        height: 100vh;
-        position: relative;
-        overflow: hidden;
-    }
-}
-
-.scroll-content {
-    transform: translate3d(0,0,0);
-    margin: 0;
-    overflow: visible;
-    height: 100%;
-}
-
-// Scrollbar
-// ==========================================================================
-[data-scrollbar],[scrollbar],scrollbar{display:block;position:relative}[data-scrollbar] .scroll-content,[scrollbar] .scroll-content,scrollbar .scroll-content{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}[data-scrollbar].sticky .scrollbar-track,[scrollbar].sticky .scrollbar-track,scrollbar.sticky .scrollbar-track{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track,[scrollbar] .scrollbar-track,scrollbar .scrollbar-track{position:absolute;opacity:0;z-index:1;-webkit-transition:opacity .5s ease-out,background .5s ease-out;transition:opacity .5s ease-out,background .5s ease-out;background:none}[data-scrollbar] .scrollbar-track.show,[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track.show,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track.show,scrollbar .scrollbar-track:hover{opacity:1}[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track:hover{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track-x,[scrollbar] .scrollbar-track-x,scrollbar .scrollbar-track-x{bottom:0;left:0;width:100%;height:8px}[data-scrollbar] .scrollbar-track-y,[scrollbar] .scrollbar-track-y,scrollbar .scrollbar-track-y{top:0;right:0;width:8px;height:100%}[data-scrollbar] .scrollbar-thumb,[scrollbar] .scrollbar-thumb,scrollbar .scrollbar-thumb{position:absolute;top:0;left:0;width:8px;height:8px;background:rgba(0,0,0,.5);border-radius:4px}[data-scrollbar] .overscroll-glow,[scrollbar] .overscroll-glow,scrollbar .overscroll-glow{position:absolute;top:0;left:0;width:100%;height:100%}
-
-.scrollbar-track {
-    user-select: none;
-    background-color: transparent !important;
-    width: 14px !important;
-    opacity: 0 !important;
-    z-index: 99999 !important;
-
-    .scrolling & {
-        opacity: 0.75 !important;
-    }
-
-    &:hover {
-        opacity: 1 !important;
-        background-color: #fafafa !important;
-    }
-}
-
-.scrollbar-thumb {
-    position: relative;
-    width: 14px !important;
-    background-color: transparent !important;
-
-    &::after {
-        content: "";
-        position: absolute;
-        top: 3px;
-        right: 3px;
-        bottom: 3px;
-        left: 3px;
-        background-color: #c1c1c1;
-        border-radius: 4px;
-        transition: background-color $speed $easing;
-    }
-
-    &:hover {
-        &::after {
-            background-color: #7d7d7d;
-        }
-    }
-}