JavaScript - Cancel Scroll event

Question

I want to disable the scroll in one of my pages. I don't want to write

scroll(0,0) or scrollTo(0,0)

in the scroll event which will give a 'jumpy' nature. Can't I have something like

event.preventDefault()

for canceling the event?

See http://stackoverflow.com/questions/1459676/prevent-scroll-bubbling-from-element-to-window/1460020#1460020 — Crescent Fresh, Aug 04 '10 at 11:38
http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily although that is to temporarily disable scrolling, you can set it to permanently disable it. You should use that instead of using overflow: hidden because Chrome has a bug that you can still scroll on overflow: hidden pages using the mousewheel, arrow keys, pgup and pgdn keys, and touch scrolling if you're on a touch device. The accepted answer in that link provides a way that effectively disables it. — markasoftware, Jul 22 '13 at 17:36

score 6 · Accepted Answer · edited Jun 21 '11 at 16:03

6

document.body.style.overflow = 'hidden';

edited Jun 21 '11 at 16:03

Bill the Lizard

398,270
210
566
880

answered Aug 04 '10 at 11:44

Marcelo

9,387
3
35
40

1

Note that a chrome bug will still allow scrolling when overflow hidden is applied. – markasoftware Jul 22 '13 at 17:20
How to re-enable after clicking? – adamcapjones Dec 24 '22 at 16:49

score 2 · Answer 2 · answered Aug 04 '10 at 11:40

2

The only acceptable way of preventing scrolling is making the content fit inside the window. Anything else, and you're pissing users off.

You can also use position: fixed CSS - but still, if it's larger than the window, the rest is unusable, so you might as well follow the suggestion #1.

answered Aug 04 '10 at 11:40

Amadan

191,408
23
240
301

There actually are many uses for cutting off content. My site uses css 3d transforms, and for some reason a useless part of it extends 10-20 pixels beyond the end of the page. – markasoftware Jul 22 '13 at 17:39
Quite the blanket statement Amadan. In my case, I want to shut down the auto scrolling (which is "pissing off" my users.) This occurs when elements from the list are added / removed. Please don't assume that a particular technique is no good, just because this particular use case could be criticized. – redevill Aug 20 '20 at 22:22
That's opinionated. I have a usecase where I need to temporarily keep the user from scrolling, and I can come up with plenty others. – iMe Nov 03 '22 at 14:35

score 0 · Answer 3 · answered Aug 04 '10 at 11:42

0

I wonder if overflow: hidden; will work by putting it on the html, body selector in CSS?

answered Aug 04 '10 at 11:42

dsamarin

313
2
6

Just tested in Firefox 3.6.8 and it works by putting it on the body element. – dsamarin Aug 04 '10 at 11:44
Note that a chrome bug will still allow scrolling when overflow hidden is applied. – markasoftware Jul 22 '13 at 17:38

score 0 · Answer 4 · answered Aug 04 '10 at 11:44

0

Create a div that fills the whole area and set that to overflow: hidden. That way, you will never get scroll bars and no scroll events will be created.

answered Aug 04 '10 at 11:44

Aaron Digulla

321,842
108
597
820

JavaScript - Cancel Scroll event

4 Answers4