How to disable smooth scrolling in Chrome

Question

I'm creating a web app (that's mostly focused on usage in Chrome), but the 'smooth scrolling' (I guess that's what it's called, the 'extra' scrolling like on IOS) of Chrome (when on mac) gets in the way.

Is there any way to disable this via javascript?

Answer 1

What you're referring to as smooth scrolling is called overscroll bounce or rubber-band scrolling.

Disable iOS Overscroll but allow body scrolling

Answer 2

Use Javascript to set the CSS style of the HTML and BODY tags.

Set their "overflow" property to "hidden".

Answer 3

I was able to mitigate some rendering issues I was having with smooth scrolling by intercepting wheel events and moving the scrollTop/scrollLeft pixel positions "by hand":

function wheeled(event) {
  event.preventDefault()

  container.scrollTop += event.deltaY
  container.scrollLeft += event.deltaX
}

container.addEventListener('wheel', wheeled, { passive: false, capture: true })
// actual render code is in the `scrolled` handler because
// there are other wheel events in the code that adjust the scroll position
container.addEventListener('scroll', scrolled, { passive: true })