Streaming live at 10am (PST)

Smoothing out mouse-wheel scroll


#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?


#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:

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: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

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:

I hope this helps!


#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>