0

I've spent quite a while looking for solutions to this, but there doesn't seem to be anything targeting what it is I'm trying to do. I'm trying to make the scrolling through my webpage 'smooth' in a sense that it is actually non-instant. I.e say a mousewheel typically moves the page up/down by 150px, I want this to be done over the course of something like 0.5s and 'ease-out' to this position.

This site here is a great example, it has a 'scrollable' container which actually scrolls by use of a transform: translate3d() and does so over the course of a second or so to give a nice smooth feel when moving up and down the page opposed to the janky jumping of typical scrolling. https://deanbradshaw.com/overview

I'd normally post code of what I've tried but I seriously don't know where to start except for the fact I have some container and contents like below, and want to be able to scroll through these contents in this animated/transitioned manner.

Any advice on resources which go into details about how to do this, similar questions I've missed when searching or some example code for this would be incredibly helpful.

<div class="scrollable-container">
    <div class="content-list">
        ..
        ..
        ..
    </div>
</div>

Edit For the sake of clarification, I think it's important to highlight I want to be able to control:

  • The duration taken for the webpage to scroll up/down to the new offset
  • The properties of this transition (linear, ease-in, ease-out, etc)
  • The pixel value per mousewheeldown/up, i.e. default is 200, but I may want to set this to be only 100px per wheelup/down
Danny Lines
  • 23
  • 8
  • what you are looking for is called `scroll-behavior: smooth;` You can either achieve it by exactly using that within your css for the `HTML` selector or by using JS scripting – tacoshy Jan 17 '21 at 18:40
  • @tacoshy I might (and probably am) mistaken, though I thought scroll-behavior smooth was related to anchoring points and making the webpage scroll to specific areas smoothly on events such as clicking of a link. Also, would this enable controlling the amount by which a mousewheel down event scrolls? I.e. it may currently scroll -200px per wheeldown, but if I wanted it to only scroll -100px, I take it this would have to be something I'd do in javascript manually? – Danny Lines Jan 17 '21 at 18:44
  • yes that is true. But you also have JS for normal scroolwheel. A SO topic already exist ehre: https://stackoverflow.com/questions/5560714/how-to-enforce-a-smooth-scrolling-rule-for-mousewheel-jquery – tacoshy Jan 17 '21 at 18:49

1 Answers1

0

You can do it using following CSS. Make your Page scrollable by this

html {
  scroll-behavior: smooth;
}

Then if you have links within your document, you will scroll to the content you were previously hopping to :)

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35