added scroll extends + LocomotiveScroll module + scroll basic style

assets/scripts/modules.js

@@ -1 +1,2 @@
 export {default as Example} from './modules/Example';
+export {default as LocomotiveScroll} from './modules/LocomotiveScroll';

assets/scripts/modules/LocomotiveScroll.js

@@ -0,0 +1,31 @@
+import { APP_NAME, $document } from '../utils/environment';
+import AbstractModule from './AbstractModule';
+import ScrollManager from '../scroll/vendors/ScrollManager';
+
+const MODULE_NAME = 'LocomotiveScroll';
+const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
+
+export default class extends AbstractModule {
+    constructor(options) {
+        super(options);
+    }
+
+    init() {
+        setTimeout(() => {
+            this.scrollManager = new ScrollManager({
+                container: this.$el,
+                selector: '.js-animate',
+                smooth: true,
+                smoothMobile: false,
+                mobileContainer: $document,
+                getWay: false,
+                getSpeed: false
+            });
+        }, 500);
+    }
+
+    destroy() {
+        super.destroy();
+        this.scrollManager.destroy();
+    }
+}

assets/scripts/scroll/Scroll.js

@@ -0,0 +1,26 @@
+// ==========================================================================
+// 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

@@ -0,0 +1,21 @@
+// ==========================================================================
+// 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/main.scss

@@ -42,6 +42,7 @@
 @import "objects/form";
 @import "objects/button";
 @import "objects/pjax";
+@import "objects/scroll";
 
 // Vendors
 // ==========================================================================

assets/styles/objects/_scroll.scss

@@ -0,0 +1,18 @@
+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%;
+}

www/index.html

@@ -32,7 +32,9 @@
 
         <div id="js-pjax-wrapper">
             <div class="js-pjax-container" data-template="home" >
-                <div data-module="Example">Home page with Example module</div>
+                <div class="o-scroll" data-module="LocomotiveScroll">
+                    <div data-module="Example">Home page with Example module</div>
+                </div>
             </div>
         </div>