Inertia Based Scrolling Code

Hey guys,

I noticed on some websites, the desktop browser scrolling behaves almost like a mobile device or tablet, where scrolling carries a certain ‘weight’ and is eased with each click of the mouse wheel.

I found this script that achieves the effect.

Two questions:

  1. Is it possible to use this script with a WebFlow project?
  2. Is this type of scrolling bad practice?

I like it personally, I think it adds a sense of weight and polish to the site, but the one comment on that link above says it’s HORRIBLE and disrespectful to people who like to us Page Up and Page Down. Seems a little overly opionated to me, but I was wondering if there is something I’m missing that makes this a bad effect to use.

Thanks in advance! :sunny:
Zack @ MetaFlare Media & Design

Hi, @MetaFlare

From my experience, there is small percentage of users who likes slow scroll and slow animation at all. Most people looking websites in really fast “regime”. And if nothing caught their attention they just close the page. So… I think you risk to lose some part of potential users by using such scroll, IMHO.

Cheers,
Anna

Hey @sabanna,

Huh, it doesn’t seem slow at all to me. Maybe it the speed varies depending on your browser? I guess I’d have to test for that. If anything, I feel like it moves faster than a standard scroll.

Anyway, I’d still love to know if there is a way to get this to work in WebFlow.

Thanks!
Zack @ MetaFlare Media & Design

All you need to do is put that script code snippet from 2nd step into the footer custom code part (don’t forget wrap with <script></script>). Webflow already including jQuery to every site so you will not have to use 1st step of their instruction.

Hope it will work :slightly_smiling:

Cheers,
Anna

Thanks @sabanna! I was able to get it working. Seems like the code messes with the OnScroll events and z-index values of the main div element, so I have some adjustments to do the code. But it’s working! Pretty cool.

1 Like

@MetaFlare Have you found a way to fix the OnScroll events? I’m having similar issues.

1 Like

@SidneyOttelohe, No, I haven’t quite found a fix yet. I think the problem lies in the method used to accomplish the smooth scrolling effect, which is to set the entire page inside of a div block, make that div block Fixed, and then use jquery animation to move that fixed div up or down based on the mousewheel movement. The body of the document that sits behind the moving div block is not actually moving, it just sits still in the background, therefore not triggering any interactions.

Perhaps there is a way to work around that, but as of right I’m thinking that the two functionalities are incompatible.

@MetaFlare Yes I see! I’ve got a bit of a different situation going but the same problem. I’ve used a wrap that holds my scroll-able content set to max 100vh and overflow: auto. but technically the content still scrolls in but for some reason my interactions fail from loading properly. :frowning:

Can you provide a link to your project so I could see what you’re seeing?