baptistebriel/smooth-scrolling

smooth scrolling and parallax effects on scroll

smooth

Smooth is a small JavaScript module based on VirtualScroll to create smooth scrolling and parallax effects on scroll. It works both with fake scrollbars and native scrolling.

Usage

npm install smooth-scrolling

import Smooth from 'smooth-scrolling'

const section = document.querySelector('.vs-section')
const smooth = new Smooth({
  native: true,
  section: section,
  ease: 0.1
})

smooth.init()

Options

• listener: on-scroll events listener & parent container for all elements
• direction : vertical or horizontal scrolling behavior
• native: use the default scrollbar
• section : the element to transform
• ease : the easing value (usually between 0 and 1)
• vs : you can pass some option for virtuall-scroll: limitInertia, mouseMultiplier, etc
• preload : if set to false, there will be no resize function called after all images loaded
• noscrollbar : if using virtual-scroll and set to true, it will not build a custom scrollbar
• callback: function called on requestAnimationFrame

Methods

smooth.init()

Will add all event listeners and DOM elements.

smooth.on()

Will listen to either window scroll event (if native), otherwise VirtualScroll

smooth.off()

Will stop listening to onscroll/wheel events.

smooth.destroy()

Will remove all event listeners and DOM elements.

smooth.scrollTo(offset)

Basic scrollTo function.

Extends Smooth

import Smooth from 'smooth-scrolling'

class Custom extends Smooth {
  
  constructor(opt = {}) {
    super(opt)
    this.dom.section = opt.section
    this.dom.opacity = opt.opacity
  }
  
  run() {
    super.run()
    
    const current = Math.round(Math.abs(this.vars.current))
    const opacity = Math.max(0, Math.min(1 - current / (this.vars.height * .5), 1))
    
    this.dom.opacity.style.opacity = opacity.toFixed(2)
    this.dom.section.style[this.prefix] = this.getTransform(-this.vars.current.toFixed(2))
  }

  resize() {
    this.vars.bounding = this.dom.section.getBoundingClientRect().height - this.vars.height
    super.resize()
  }
}

export default Custom

// ...and later on
import Custom from './custom-smooth-scrolling'

const section = document.querySelector('.vs-section')
const opacity = document.querySelector('.vs-opacity')

const smooth = new Custom({
  section: section,
  opacity: opacity,
  ease: 0.1
})

smooth.init()

Development

git clone [email protected]:baptistebriel/smooth-scrolling.git

cd smooth-scrolling/ && npm i && npm run dev

You can use [http-server](https://www.npmjs.com/package/http-server) or MAMP to preview the demos.

Demos

npm run demo-parallax

npm run demo-parallax-page

npm run demo-horizontal

npm run demo-native-horizontal

npm run demo-opacity

npm run demo-scale

npm run demo-split

npm run demo-performances

Examples

• etq.store
• femmefatale.paris
• buildin.amsterdam
• romainpsd.com
• flavinsky.com
• alisharaf.com
• bbriel.me
• studiochevojon.com
• andeinerseite.video
• eginstill.com
• blackballoon.fr
• & more to come!

Further understanding

If you didn't already read the tutorial, I highly recommend it. Smooth.js is basically what's explained on the blog post. I just needed a simple script to get things done without having to write lots of code every time I wanted to use this technique.

License

MIT, see LICENSE.md.

smooth-scrolling's Issues

Error: "Cannot read property 'run' of undefined"

I'm getting an error in this method:

Smooth.prototype.requestAnimationFrame = function requestAnimationFrame () {

    this.rAF = requestAnimationFrame(this.run);
};

Error is Cannot read property 'run' of undefined for the this.run reference. Any reason this would be undefined there?

Possible to have another smooth applied to a div?

Is it possible to have another smooth applied to a div? One pretty big use-case is a cart modal or menu and so forth.
When I initialize two different smooth objects it just adds another .vs-scroll-view to the body...

Smooth.resize() when using native gives error.

When executing Smooth.resize() while the nativeScroll is set to true I'm getting Uncaught TypeError: _smoothScrolling2.default.resize is not a function not sure where _smoothScrolling2 is coming from...

touch devices

hi,
i tried the smooth scrolling on ipad but it seems that the scrolling is a way too smooth there. what could be the reason?
thanks.

preload: true will block scrolling until everything is loaded

If you have preload: true in the options, smooth-scrolling will querySelectorAll image elements inside the container to preload them and then call the resize function when the last one is loaded.

If you have lots of images, smooth-scrolling will not respond before those images are being loaded.
A solution for this is to call resize at the very beginning of init AND as soon as all images are loaded. This way we're sure that the user will be able to start scrolling from the beginning, but the function will be called twice; one time on init and a second one when all images are loaded. Not very good as we're doing quite a lot of getBoundingClientRect()calls for every element you want to apply transform.

If you don't want to use preload: true because of this issue, you can use the intrinsic ratio to wrap all images into containers. This way, even if the images aren't loaded your container's height will not be updated after images are loaded. But it doesn't work all the time as you'll have to define the ratio of the image in CSS.

scrollTo() without native scrollbar - Cannot set property 'target' of undefined

Hello there!

in scrollTo() there is a little typo mistake
https://github.com/baptistebriel/smooth-scrolling/blob/master/index.js#L261

this.pos.target = offset

Should be

this.vars.target = offset

Cheers!

better css controls with native true/false

I think it would be good to add a is-native / is-virtualscroll class on the body at the initialisation of smooth-scrolling.

This way we can have more control on the CSS applied on each case (i.e virtual-scroll needs overflow: hidden; on body, while native scrolling doesn't)

Cannot use Smooth without module loader?

I typically write in vanilla ES2015 JavaScript without using Browserify or Webpack, and as such I can't seem to load Smooth. Simply including the minified Javascript on the page does not actually attach Smooth to the window, leading to Uncaught ReferenceError: Smooth is not defined any time I try to use Smooth.

I assume it's an issue somewhere with either Line 1 or Line 346, but I'm not terribly familiar with the different module systems.

Hiding the scroll thumb when content doesn't extend beyond viewport.

Is there a way to hide the scrollbar/thumb when the content/scroll-helper-div doesn't expand beyond the viewport (non-native of course)?

I feel really thick asking all these questions, which probably shouldn't be posted as issues on Github. Sorry! :)

How can I add class or animation for elements on scroll

Hi, your plugin is awesome!
I am designer, which interested in js , and I have a problem)

In other project I use for this onScreen.js plugin, but it doesn't work. How can I add class or animation for elements on scroll, when they reach viewport?

Parallax Sections

Hey baptistebriel,

Using your 'parallax-page' demo as a base, I'm trying to make a page with numerous sections, with parallax elements absolutely positioned, relative to the parent.

I originally changed the demo so it displayed divs instead of images and I'm experiencing some issues with the scroll container having no height on page load. But when you resize the window, it recalculates and works fine. I can fix this in a hacky way by forcing a resize in my code:

setTimeout(function(){
    window.dispatchEvent(new Event('resize'));
})

Is there a more elegant way to fix this? I'm using webpack as a build tool and the strange thing is once the packages are bundled for production it works fine?!? The codesandbox example below seems to work fine too.

Also another issue I'm experiencing is elements with a positive data-speed attribute applied (data-speed="1") to a div/img causes it to jump when visible in the viewport. You can see this on the link below, once the container with the cat image is scrolled to. Any ideas why it could be doing this?

Here is the code - https://codesandbox.io/s/4r6okr4834

Many thanks and great work 👍

Smooth Scroll inits fine, but content isn't scrollable.

Is there issues running the script together with lazysizes and packery, for example? For some reason, scrolling doesn't work for me, and the helper-div that sets the scroll height based on the getBoundingClientRect is at height: 0;...

I've tried initializing before and after load is complete and preload both true and false. So not sure what's happening with the init, as it generates all the classes and so forth.

It also seems to happen without packery and lazysizes, could it be that I have some elements sized with vh and vw?

Drawing a blank here, and not very good with JS. :/

Cheers!

Child fixed container & smooth scrolling section container

Hi. How to make child container fixed relative to window? Smooth scrolling container also is fixed.
And additionally: how to use listener?

this.smooth = new Smooth({
            extends: false,
            // when hide scrollbar
            native: false,
            // when hide scrollbar
            noscrollbar: true,
            section: container,
            ease: 0.15,
            preload: true,
            listener: function(){

                console.log("listen")
            }
           
        })

this.smooth.init()

• no logs

Not an issue, but how does parallax work?

Hi,

Thanks for an excellent plugin. Although this is not an "issue" it would be cool for someone to clarify to me how parallax elements work?

Isn't it just setting a variable, adding a classname and giving the item a data-speed?

http://codepen.io/ReGGae/pen/oLzGaz

.min not working, uglify breaks script

hi baptiste,

i noticed uglify seems to break the script. I'm not sure whether it's a uglify setup problem or some declarations within the script.

Currently I'm using gulp with webpack and babel.
Neither Uglify nor babili are working, as soon as I output minified js it seems to calculate a height of 0.

also including the min version right away doesnt work. I gave up on trying to import/require it, that just gave me a bunch of errors I'M not advanced enough to understand.

Is there an update-function?

Is there any way to update the smooth-scroll after an ajax/pjax-load? Resizing works, but not by simply loading new content within the section...

I tried destroying to the reinitialize on new page but when trying to use Smooth.destroy() I get this;

Uncaught TypeError: smooth_scrolling__WEBPACK_IMPORTED_MODULE_3__.default.destroy is not a function
    at Object.<anonymous> (index.js:423)
    at Object.trigger (barba.js:929)
    at Object.onStateChange (barba.js:1391)
    at Object.goTo (barba.js:1198)
    at Object.onLinkClick (barba.js:1302)

webpack issue

Hi,
Thank's for this magic module.

I am encountering a problem when I extend Smooth on a webpack project.
If I use it directly, it works. If I extend the class, I have the following error in the console :
Class constructor Smooth cannot be invoked without 'new'

Here is my code

import Parallax from './plugins/parallax';
const main = document.querySelector('#main');
 const parallax = new Parallax({
    native: true,
    section: section,
    ease: 0.1
  })

and the begining of the parallax class

import Smooth from 'smooth-scrolling';
import {
  TweenMax,
  TimelineMax
} from 'gsap';

class Parallax extends Smooth {

  constructor(opt) {
    ...
  }
}
export default Parallax;

For informations, I use version 2.3.7 with webpack on a vuejs/laravel project with https://github.com/vuejs/laravel-elixir-vue-2

Thank's

Disable Space Bar?

Hi,

We have smooth-scrolling enable and whenever you press space bar the page scrolls down the height of the viewport. How do you stop this behaviour?

Override Smooth

Hi :)

I am using Smooth for an horizontal scroll, I only would like to override the calc method to change
const delta = this.vars.direction == 'horizontal' ? e.deltaX : e.deltaY
with
const delta = this.vars.direction == 'horizontal' ? e.deltaY : e.deltaX

So I did

import Smooth from 'smooth-scrolling'

class SmoothHorizontal extends Smooth {

    calc(e) {
        const delta = e.deltaY

        this.vars.target += delta * -1
        this.clampTarget()
    }
}

export default SmoothHorizontal

but this doesn't work, do you have any idea ?

Thanks 👍

Parallax start position

Hi there! Great package.

We are running SmoothScroll with parallax with preload set to true. We've got a loading screen that covers the page entirely and only fades out once all the images on the page have loaded and resize() has been called again as per #49.

The challenge we're having is that our hero image has parallax on it, and you can see it visually jump when the parallax transform gets added. Oddly, this seems to be happening several seconds after resize() has been called and the loading screen has faded out.

Is there a way to ensure a parallax element's origin on init is transform3d(0, 0, 0), and those values only increase / change once scrolling has actually begun? If not, do you have any other ideas for how to control for the initial parallax position without seeing a visual jump when parallax inits?

Issue building production files with webpack. UglifyJS </3 ES6.

Hi,

When buidling production files with Webpack I get the following error:
"ERROR in static/js/1.c44247249e196963e223.js from UglifyJs
Unexpected token: name (Smooth)"

It seem to be an UglifyJS/ES6/packaging issue.

Here is a related link: https://swizec.com/blog/fun-surprise-uglifyjs-cant-es6/swizec/7272

Use native touch scrolling?

Hey Baptiste,

Is there a simple way to use the native scroll smoothing on touch devices?

What I mean is (for example); the native iOS Safari scrolling is natively smooth and responsive, but with smooth-scrolling, it's either slow, or at least different enough to feel a bit "off". I want to keep smooth-scrolling enabled for the parallax and so forth, but not the overall scrolling movement.

Would setting ease to 0 and vs: { preventTouch: true } or some similar setting combination suffice?

Need support for Typescript

I'm not able to import Smooth class into my typescript project
import Smooth from 'smooth-scrolling'; // throwing error 'Can not find module smooth-scrolling'

My Footer is cut off (works after resize)

Hi,

I have a strange problem on this Site: http://www.ide.co.at/yachting/ When the page initial loads the footer gets cut off. After I resize the page the footer is shown.
This behaviour shows up with smooth scroll enabled. Any Ideas to solve this?

https://i.imgur.com/wPuPR3s.png

Regards

slow scrolling on phone

Device: iPhone 5s

scrolling is very slow—to the point it feels unresponsive.
tried to change ease to 1. Now the momentum is gone. :(

What about mobile ?

Hey baptiste !

I'm wondering about those options of VS.

touchMultiplier : I suppose it is used to crank up or slow down the amount of scrolling on touch devices but i can't find any differences even if i boost the value to unreasonnable amounts.

preventTouch : I suppose it is used to prevent the smooth scrolling to run on touch devices, but once again, it doesn't appear to make any differences.

Am i wrong about what those two options are supposed to do ? I suppose i'm not as i read in a other issue that's what they're suppose to do.

And i suppose i've passed the options the right way, but again, i might be wrong.

const smooth = new Smooth({
			listener: uscroll,
			native: true,
			section: section,
			ease: 0.05,
			vs: {
                 touchMultiplier: 1.5,
		preventTouch: false,
         }
})

Merci !

webpack issue?

Hi,

I am trying to initialise the plugin but I'm getting a module loader error. I'm kind of new to Webpack, do you know how how to fix this error?

Image: http://puu.sh/o5DAo/6e4651782f.png

Uncaught TypeError: Class constructor Smooth cannot be invoked without 'new'

Hi, nice smooth-scroll, really love it, but when I try to extends Parallax with smooth-scroll I've got this message, I don't really know why... but I think it's something with my webpack? or something,,

The error

Uncaught TypeError: Class constructor Smooth cannot be invoked without 'new'

var Parallax = function (_Smooth) {
	_inherits(Parallax, _Smooth);

	function Parallax(opt) {
		_classCallCheck(this, Parallax);

                 <!----- This line --->
		var _this = _possibleConstructorReturn(this, (Parallax.__proto__ || Object.getPrototypeOf(Parallax)).call(this, opt));
                 <!--- end of line --->

		_this.createExtraBound();
		_this.resizing = false;
		_this.cache = null;
		_this.dom.divs = Array.prototype.slice.call(opt.divs, 0);
		return _this;
	}
...
}

My webpack.config

'use strict';

const path = require('path');
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const SvgStore = require('webpack-svgstore-plugin');
require("babel-polyfill");

module.exports = {
	cache: false,
	context: path.resolve(__dirname, "src"),
	entry: {
		app: [
		"babel-polyfill", "./js/app.js"
		],
	},
	output: {
		filename: "[name].bundle.js",
	},
	resolve: {
		alias: {
			"TweenLite": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TweenLite.js'),
			"TweenMax": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TweenMax.js'),
			"TimelineLite": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
			"TimelineMax": path.resolve(__dirname, 'node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
			"ScrollMagic": path.resolve(__dirname, 'node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
			"animation.gsap": path.resolve(__dirname, 'node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js')
		}
	},
	module: {
		rules: [
		{
			test: /\.js$/,
			exclude: /node_modules\/(?!(dom7)\/).*/,
			use: [
			{
				loader: "babel-loader",
				options: { 
					presets: ["es2015"] 
				}
			}
			],
		},
		{
			test: /\.scss$/,
			use: [
			MiniCssExtractPlugin.loader,
			{ 
				loader: 'css-loader', 
				options: { 
					importLoaders: 1 
				}
			},
			{
				loader: 'sass-loader'
			}
			],
		},
		{
			test: /\.(png|woff|woff2|eot|ttf|svg)$/,
			loader: 'url-loader?limit=1000&name=[name]-[hash].[ext]'
		}
		],
	},
	externals: {
		'TweenMax': 'TweenMax'
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].bundle.css"
		}),
	    new SvgStore({
	      // svgo options
	      svgoOptions: {
	        plugins: [
	          { removeTitle: true }
	        ]
	      }
	    })
	],
};

How do i solve it?

Scrolling section responsive

Hi,

I am currently working on a site to reproduce "one page scroll section".
It works pretty well on desktop. But in mobile (chrome), I can not remove the pull-to-refresh.

I try to reproduce something like this : https://www.humble.tv (pull-to-refresh effect disable).
I try some css "hack" but it doesn't work.

Would anyone have an idea to reproduce that ?
Thank's

Horizontal Scrolling Example

Thanks for the amazing work!

I've been trying to make the horizontal scrolling work, and can't seem to do so ...
I've been trying to reproduce the effect in http://www.buildinamsterdam.com

Could you in any way provide a working example?
Thank you so much!

Scroll based interactions

hey there.
i really love your plugin. and it works perfectly on my website. the only thing is.. my scroll based interactions don't work anymore now. i guess it's because of the fixed wrapper as the elements don't really scroll into view anymore. how can i achieve this?

please help. and thank you so much.

Not using es6 or babel or require

I'm loading the script in my html

/resources/js/plugins/smooth-scrolling.min.js

In my js file i have

var section = document.querySelector(".js-slider");
var child = document.querySelector(".js-item");

    var smooth = new Smooth({
        preload: false,
        native: false,
        direction: "horizontal",
        section: section,
        divs: child
    });

    smooth.init();

But this doesn't do anything, I can see from you demos and code examples you are using es6. I'm not i'm using old javascript. how do i extend smooth to use the custom.js (as per demos) but not use es6!

i've tried bits like this

var smooth = new Smooth({
preload: false,
native: false,
direction: "horizontal",
section: section,
divs: child,
run: function() {
// do something
}

    });

Thanks

Empty space after content with native: true

Hey @baptistebriel, it's me again 😐

I ran into another issue...

I've tried to set up my smooth scroll with native: true to enjoy the is-scrolling feature which is added to the listener when doing so. Except now, even though i'm able to scroll, it's causing my page to be way higher than it's suppose to, "adding" a large blank space after my content. If i put native back to false, there's no problem whatsoever.

My scroll section is the right size according to the inspector...

Do you know what might be causing the issue ?

Thanks (once again), hope i'm not asking to much.

You can find the example here :
https://pensive-lichterman-1038a1.netlify.com

ps : i'm using biggie to set up all this, i don't think it's related to this. But if you want to look at the home.js file, you know where to find it. 😉

Let me know if i'm asking to much, i'm pretty new to all this stuff, doing my best trying to figure it out on my own, but sometimes i have no clue of what might be happening, and it could simple be a misconfiguration.

cheers

safari trackpad jitter

hi,

When on safari using a trackpad i get a very jittery jumpy scroll animation.
I assume this has to do with inertia.

i've set it up like this

smooth = new Smooth({
	native: true,
	section: section,
	ease: 0.1,
	vs: {
		limitInertia: true
	}
});

should be correct right?
but it does not fix the problem. Am I doing something wrong, or is this a known bug? can anyone replicate this?

scrollTo with scroll disabled

Hello,

First of all, THANK YOU for this librairy, it is so fun to play with it and we can do such beautiful things !

Here is my problem :

• I would like to move my section on mouseY position, i'm using the scrollTo method on throttle mousemove event. It works fine.
• I would like to disable the mousewheel (the usual scrolling behaviour) and only move the section with my mousemove thing.

How can i do that ? When I turn off smooth (smooth.off), the scrollTo method doesn't work anymore.

An other problem (related but maybe an other issue) :
Is it possible to have different behaviour on my mousemove thing and the usual scroll.
For example, I would like a different ease value for the scrollTo method than the usual scroll.

Thank you again and sorry for the disturbance.
Mourtaza.

StickySidebar with Smooth-Scroll

Hi, I'm trying to build an StickySidebar, I realised that it's not possible to set position:fixed with smooth-scroll, so I have to transform-count the scroll position,

I want something like this. https://github.com/WeCodePixels/theia-sticky-sidebar

Can someone help me out with a stickysidebar that's work smooth together with smooth-scrolling.

My code right now..

class StickySidebar {
	constructor( opts = {} ) {
		this.bind()

		this.dom = {
			el: document.querySelector('[data-sticky]'),
			content: document.querySelector('.o-content'),
			sidebarInner: document.querySelector('.o-sidebar__inner')
		}
    
		this.bounding = this.dom.content.getBoundingClientRect()

		this.sticky = false

		this.init()
	}

	bind() {
		['run']
		.forEach((fn) => this[fn] = this[fn].bind(this))
	}

	run() {
		const current = window.scrollY
		const transform = current - (this.bounding.top - 200)
		const bottom = this.bounding.bottom - (this.dom.sidebarInner.offsetHeight + 300)
		const top = this.bounding.top - 200

		if ( current > top && current < bottom ) {
			this.dom.el.style.transform = `translate3d(0, ${transform}px, 0.1px)`
			this.dom.el.classList.add('is-sticky')
			this.sticky = true
		} else {
			this.dom.el.classList.remove('is-sticky')
			this.sticky = false
		}

	}

	addEvents() {
		TweenMax.ticker.addEventListener('tick', this.run, this)
	}

	init() {
		this.addEvents()
	}
}

MAC OS native touhpad gestures

MAC os native page navigation gestures like going back and forward conflicts with vertical scrolling, (native scroll disabled). While scrolling with two fingers up and down, if I slightly move my fingers to left or right, it triggers OSX's browser navigation. Is there any way to prevent it?

Suggestion for useful methods

Hi there!
There could be some useful methods that could be implemented in my opinion:

.lock() and .unlock()
To temporary lock the scroll

.setPosition()
Set a scroll position without having the tweening

What about adding a simple event-system/dispatcher?
Could be useful to subscribe to events (scroll, resize...)

I was able to implement those thing easily, just extending the class.
Not sure but to me they look quite handful / generic, what do you think?

detect if the instance created extends or direct instance of Smooth

Currently to extend Smooth in your own file you have to pass an option. I need to know if the instance created extends Smooth or is direct instance of Smooth.

https://github.com/baptistebriel/smooth-scrolling/blob/master/index.js#L17

I've done this so smooth-scrolling.js could be used on its own without going into the build process.

use IntersectionObserver (if available) for in-viewport changes

Empty space at the bottom after resizing

How to reproduce:

• open https://pierrelevaillant.me/#!/projects with a "desktop" window size.
• scroll at the bottom.
• make the window smaller.
• notice that the height of the page has changed and now there is "empty space".

I temporary fixed forcing the calc after resizing.

resize() {
    super.resize();

    this.calc({
      deltaX: 0,
      deltaY: 0
    });
}

Would be great if it's possible to temporary disable the tweening when applying this fix.

Smooth.scrollTo and Anchor links

I have a two-part question.
Is there a way to use scrollTo (or any other way) to simply snap to (0,0), without animation and easing? Is there also a way to use #anchorlinks to scroll to, with/without easing?

How to call the original VirtualScroll .on()

I've tried with smooth.on() but it doesn't seem to work the same way it does in the original lib.

Thanks

Scroll with fetch

Hi!

I want to add elements through the fetch and add class or animation for elements on scroll, when they reach viewport? I can't runing example.

I run, for example:
npm run demo-parallax-page
and i get:

> [email protected] demo-parallax-page E:\web-development\smooth\smooth-scrolling

> watchify -v -t babelify demos/parallax-page/index.js -o demos/parallax-page/build.js

48493 bytes written to demos/parallax-page/build.js (2.52 seconds) at 00:18:29

Horizontal Scrolling inside native vertical

Is it possibile to put a div with horizontal smooth scrolling inside a vertical scrolling (native, possibly), but using the deltaY instead of deltaX property? When the div or whatever is in position 0 and the user scroll to go back to the top, the page scroll in native direction; otherwise, (if position mouse direction is down or is top but position is > 0), the user scroll inside horizontal virtual scrolling.

How can i extend with custom.js , index.js in demo

Hi ! First of all thanks for great plugin, i see the demos and its amazing!

But i have 2 beginner questions

1. For example in demos/opacity/ we have build.js , index.js , custom.js in index.html we use only build.js , and in build.js is already extended to work with opacity . But why we need other 2 files ?
   Can i just connect smooth-scrolling.js to index.html page , and extend with custom.js and index.js?

2. It is possible to use smooth scrolling + parallax ? yes sure you have demo for parallax but its works alone , without vs-section container. i very like to have result like on this demo http://www.eginstill.com/project/loft-val-thorens/ i trying almost 10 hours but not success, thats why i write you :)
   I am be very happy if you help me a little

Section scrolling

Hi! Im new in js. Tell me please, how to make snap scrolling in your script? It most be easy.

Getting rid of native scrollbar

Hi Baptiste, I'm trying to figure out how to remove the native scrollbar. Setting the element to overflow: hidden; doesn't cut it. Any other options? Thanks.

Importing issue via webpack

Hello,

Super smashing module. Top work

However, I do have an issue

import Smooth from 'smooth-scrolling'

const section = document.querySelector('.test')
const smooth = new Smooth({
	native: true,
	section: section,
	ease: 0.1
})

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Which points to this line:

module.exports = window.Smooth = Smooth
in index.js

If I import the compiled script import Smooth from '../../node_modules/smooth-scrolling/smooth-scrolling.js' I get a different webpack error

__WEBPACK_IMPORTED_MODULE_6__node_modules_smooth_scrolling_smooth_scrolling_js___default.a is not a constructor

Any thoughts

I'm using webpack version 2.
note. I also had this issue when I was using rollup to build my scripts

Error when building

I'm getting this error when trying to build the latest version (using Parcel);

/Users/a/Sites/dev/templates/app/node_modules/smooth-scrolling/node_modules/dom-classes/index.js:5:20: Cannot resolve dependency 'indexof'
  3 |  */
  4 |
> 5 | var index = require('indexof');
    |                     ^
  6 |
  7 | /**
  8 |  * Whitespace regexp.