Smoothing out mouse-wheel scroll

Design help Custom code
1

Hi guys,

Long time listener, first time caller (and one of the many lost Muse souls looking for a new home, and in saying that I apologise in advance for my lack of scripting knowledge).

I’m trying to find some kind of plugin that will smooth out the scroll motion of the mouse wheel.

I have read an older post from 2015 that mentioned an old “nicescroll” javascript: https://nicescroll.areaaperta.com/

However it seems dated and the instructions on the website seem to be for the browser plugin (not the website). If i am missing something and if this is still the best option for webflow, can someone please breakdown for me what i need to paste into my webflow settings and where? Is it just a simple case of pasting a wad of code into the head or footer code boxes?

Many thanks.

2

Anybody?

Or is this something that webflow can’t achieve yet?

1 Like
3

Hi @tc_myers, yes, this can be achieved, sometimes it just takes a little while to get an answer on custom code questions, hang in there :slight_smile:

I made a quick video:

https://cl.ly/0I2B013e3s20/Screen%20Recording%202018-04-06%20at%2008.16%20AM.mov

Here is the cdnjs link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>

Put that in the Before Body section of your custom code panel in page settings.

Here is the base script for loading the nicescroll on the body:

<script>

// A $( document ).ready() block.
$( document ).ready(function() {
    $("body").niceScroll();
});
</script>

Here is helpful article: Custom code in head and body tags | Webflow University

If you wish to customize the nice scroll options, you can do that, here is a reference:

https://nicescroll.areaaperta.com/demo/

Here is the site demo in Webflow, you can clone that:

https://webflow.com/website/Nice-Scroll-jQuery-Example?s=nice-scroll-jquery-example

I hope this helps!

3 Likes
4

If anyone is still interested, I might add to @cyberdave’s brilliant breakdown. While his code answers the question, I found that another element is required to really get that proper smooth scroll. Please note I am no expert by any means, just combining two things I found on the internet and placing it here.

It requires the scrollspeed parameter. This I set to 200 - I’m guessing it’s unit is milliseconds? This parameter allows you to customise the speed with which the page scrolls.

Anyway, see below for my code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>

<script>

// A $( document ).ready() block.
$( document ).ready(function() {
    $("body").niceScroll({
    scrollspeed: 200
    });
});
</script>
2 Likes
5

Thanks! Appreciated.