Streaming live at 10am (PST)

Smoothscroll, Nicescroll in 2018?


#1

Hey everyone,

I’ve been trying to reproduce a smoothscroll, scroll-hijack such as build in amsterdam cases and Alexandre Rochet’s portfolio .

I’ve found @cyberdave 's 2015 answer and some other cdnjs repositories such as
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.js"></script> at
and <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script> at

And i’ve been putting them here.

I’ve also tried putting <script type="text/javascript" src=" in front of theses cdnjs to match Dave’s post.

Any ideas on how to make it work?
[share link] [live link]

Thank you!
MRV


#2

Would also love the answer to this!

I’ve tried about everything and can’t get it to work. :frowning: We need @cyberdave to the rescue!


#3

@vincent @Waldo :thinking::thinking: any idea?


#4

For basic smooth scrolling between #anchor links (university↗), you don’t need any custom js. Webflow builds that in by default: http://smooth-scroll-32e0f4.webflow.io/#a

I’m not seeing anchor links on your page. What kind of smooth scrolling are you looking for?


#5

@forresto,

I think what @mrv and I are looking for is the momentum-scrolling while using your mouse-wheel/trackpad. Not easing between anchor points.

A good example of what I’m talking about can be found on this website - https://www.awwwards.com/new-brand/

and also here (after their fancy intro) - http://ouiwill.com/#/

As you start and stop your scroll, the webpage is eased into the respective scroll-location. If you scroll really fast and stop abruptly, you will notice the website will come to a smooth stop instead of following the abrupt actions of your scroll wheel.

I think this has the .js file we need, but I can’t figure out how to get it working on webflow - https://github.com/galambalazs/smoothscroll-for-websites


#6

I see.

Something to keep in mind is that some hardware/os/browser combinations have this built in, and it can be frustrating for site visitors to change the native behavior. Also, with my slow connection, the Awwwards link that you shared is not letting me scroll at all. :grimacing:

That said, the following script tags in the “Head Code” section is working in my demo site:

<script>window.SmoothScrollOptions = { animationTime: 400 }</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js" integrity="sha256-Yut1YAlvRzggjdRiTu+X56CcayNzkjwk3p34ZZL0WHk=" crossorigin="anonymous"></script>

You can see the available options at the project wiki: https://github.com/galambalazs/smoothscroll-for-websites/wiki


#7

Thank you so much for the help @forresto,
Right now your demo site is working for me only on mouse and only in chrome.
I’ll try to add trackpad ASAP by

<script src="SmoothScroll.js"></script>
<script>SmoothScroll({ touchpadSupport: true })</script> 

or the other way; before the load.

Is it working for anyone on safari/explorer ?


#8

It does work for me (mouse wheel and keyboard arrows) in Safari 11.1 and Firefox 60. I didn’t enable touchpadSupport because OSX smooths touchpad scrolling natively.

It isn’t working on Edge 17 (tested on Browserstack). I see an unresolved issue for the library: https://github.com/galambalazs/smoothscroll-for-websites/issues/43