Streaming live at 10am (PST)

Slow down scrolling


#1

Is it possible to slow down scrolling with Webflow? Similar to this website https://ceremonycoffee.com/

Thanks a lot!


Here is my public share link: LINK
(how to access public share link)


#2

Hello @jensvahle

Yes, but you need to use custom code.

You can paste this

  <script>
  if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 40; //controls the scroll wheel range/speed
    else if (event.detail) delta = -event.detail / 40;

    handle(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

var goUp = true;
var end = null;
var interval = null;

function handle(delta) {
var animationInterval = 20; //controls the scroll animation after scroll is done
  var scrollSpeed = 20; //controls the scroll animation after scroll is done

if (end == null) {
  end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}
</script> 

Right before the closing body tag. It’s no so smooth, but I’m still searching for a good solution.

You can also check a previous post > Smooth Site Scrolling?

Hope this helps

If you need more help feel free to reach out.

Piter :webflow_heart:


#3

Thanks @PiterDimitrov
I put this in head

<script>

/* Smooth Scrolls*/

window.SmoothScrollOptions = { animationTime: 1000 }

</script>

<script async src=“https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js” integrity=“sha256-Yut1YAlvRzggjdRiTu+X56CcayNzkjwk3p34ZZL0WHk=” crossorigin=“anonymous”></script>

but… I’m not impress.
I found one website who uses this library:


and its great, but I do not know how to implement it :disappointed: