How to prevent scroll js

Scrolling

The scroll event allows reacting to a page or element scrolling. There are quite a few good things we can do here.

Here’s a small function to show the current scroll:

Current scroll = scroll the window

The scroll event works both on the window and on scrollable elements.

Prevent scrolling

How do we make something unscrollable?

We can’t prevent scrolling by using event.preventDefault() in onscroll listener, because it triggers after the scroll has already happened.

If we add an event handler to these events and event.preventDefault() in it, then the scroll won’t start.

There are many ways to initiate a scroll, so it’s more reliable to use CSS, overflow property.

Tasks

Endless page

Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).

Please note two important features of the scroll:

So, “scrolling to the end” should mean that the visitor is no more than 100px away from the document end.

P.S. In real life we may want to show “more messages” or “more goods”.

The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we’re at the page end.

We can call it immediately and add as a window.onscroll handler.

The most important question is: “How do we detect that the page is scrolled to bottom?”

Let’s use window-relative coordinates.

Prevent Scroll On Scrollable Elements [JS & CSS]

If you ever need to temporally disable scrolling on a specific scrollable element, then you will need to use JavaScript or CSS for it. Depending on your use case, you can choose between JavaScript and CSS solutions. Although in general terms the CSS solution is the most adopted one, JavaScript offers you a bit more of control and flexibility and allows you to decide how exactly you want to stop the scrolling.

1. Cancelling scroll using JavaScript

One of the options is to listen to the wheel event on the element you want to prevent the scrolling and then prevent the default behavior as well as stopping the propagation and returning a false value.

Something as simple as this, where #scrollable would be the ID of our scrollable element.

Notice as well that we are using the option on the event listener. This is actually because we have to tell browsers that, eventually, we might call preventDefault and cancel the default behavior. This way the browser is aware of it and can decide how to treat the event. You can read more about it on the docs.

If you need to provide support for IE 11 you might need to add a fallback for the passive event param as it is not supported check if the passive event is supported.

Now, what if we want to enable or disable this dynamically? Here’s an example with a couple of buttons, one to disable the scroll and another one to enable it:

If you want to apply it to multiple elements, it is as easy as iterating over them and applying them to the same function.

Now, take a look at the CSS way because the JS way can get a bit more complicated if we take into account keyboard and touch scrolling.

2. Disabling scroll with only CSS

There’s another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.

It is clearly the easiest solution if you want to disable scroll no matter what triggers it (mouse, keyboard, or touch), but at the same time, it won’t give you the flexibility of choosing what to disable and what not.

There’s a couple of differences with the previous way. They can be good for you, or not, depending on your use case:

It will also disable the keyboard scrolling too. So, you won’t be able to move up or down by using the keyboard arrows and space bar, etc.

It will not allow you to scroll up/down by selecting text.

It will disable touch scroll too.

It might also prevent scrolling using «the third button» of the mouse, which is pressing the mousewheel while dragging the mouse. (If anyone can verify this for me that’d be great, as I don’t have a mouse to test it at the moment 🙂 )

So, how do we do it? We create a class that we will toggle whenever we need it and that all it does is preventing the scroll on the element we apply it.

Then, with JavaScript we simply add or remove it when we want:

Here’s a working example:

3. Preventing keyboard scroll using JavaScript

If you decide to go for the JS solution, then you might also want to disable scroll through the keyboard.

In this case, we simply have to listen to the keydown event and prevent the default behavior when we detect they are pressing any key that can trigger a scroll movement, such as the keyboard arrows, spacebar, shift+space bar, pageup, pagedown etc.

And here’s the example:

4. Preventing touch scroll using JavaScript

And of course, we can’t forget about the touch scroll. The CSS solution seems to make things like this much easier for us, but if we need total control over what we allow users to do and what not, then probably the JavaScript version is the way to go.

Regarding touch events, this is pretty similar to canceling the scroll for the wheel event.

We simply have to add the exact same function on a touchmove event listener:

5. Using a npm module to disable scroll

You will also find there are a few components and modules out there that give you this feature out of the box.

Some only apply to the whole document while others allow you to be applied to specific scrollable elements.

how do i prevent scroll down in javascript?

ok. I might be a lazy one to search but it is a bit annoying that all I can find is

«how can i set scroll down event» when I searched «how do i prevent scroll down».

in my javascript code, I set event for down arrow key. When I press down arrow

from the browser, the browser not only does an event I set, but also does

scrolling down the page which is not I intended to. So here is my question.

How can I disable scroll down function which occurs when I press down arrow?

any help will be appreciated.

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

If you want to prevent the vertical scrollbar and any vertical scrolling action by the user, you can use this javascript:

Or, this can also be set with a CSS rule:

On the other hand, if what you’re trying to do is to prevent the default key handler for the down arrow from doing anything after you process the down array, then you need to call e.preventDefault() like this:

A cleaner way if you need to do this in more than one place would be to make your own cross browser function for this:

This is one of those perfect examples where a cross-browser framework (jQuery/YUI/etc) saves you time because they’ve already done all this cross-browser work for you.

prevent Scroll bubbling from element to window

I have a modal box window (pop-up) that contains an iframe,
and inside that iframe there’s a div that is scrollable.

When I scroll the iframe’s inner DIV, and it has reached its top or bottom limit,
the window of the browser itself starts to scroll. this is an unwanted behavior.

I’ve tried something like this, which kills the main window scroll when
onMouseEnter when mouse enters pop-up box area:

e.preventDefault() is not working as it should for some reason.

15 Answers 15

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Solved (for some browsers) using a simple CSS property:
overscroll-behavior:

auto The default scroll overflow behavior occurs as normal.

contain Default scroll overflow behavior is observed inside the element this value is set on (e.g. «bounce» effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

none No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

Simply apply that style property on the element which the scroll should be «locked-in» to and the scroll event will not bubble up to any parent element which might have a scroll as well.

Same demo as above but without the trick:

Sorry, as far as I’m aware it is impossible to cancel any kind of scroll event.

I think you’ll have to leave this up to browser authors to fix. Firefox (3.5 on Linux, anyway) seems to have a better behaviour for me: it only scrolls the parent if the child is already at the top/bottom end at the moment you start using the scrollwheel.

If we cannot prevent window scrolling, why not undo it? That is, catching the scroll event and then scrolling back to a fixed position.

I use this for the query suggest box on http://bundestube.de/ (enter some characters into the top search box to make the scrollable pane visible):

This works flawlessly in Chrome/Safari (Webkit) and with some scrolling glitches in Firefox and Opera. For some reason, it does not work with my IE installation. I guess this has to do with jQuery’s hover method, which appears to not work correctly in 100% of all cases.

How to prevent page scrolling when scrolling a DIV element?

I have reviewed and tested the various functions for preventing the body ability to scroll whilst inside a div and have combined a function that should work.

Any ideas, or better ways of doing this?

14 Answers 14

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

So you manually set the scroll position and then just prevent the default behavior (which would be to scroll the DIV or whole web-page).

If you don’t care about the compatibility with older IE versions (

I think it’s possible to cancel the mousescroll event sometimes: http://jsfiddle.net/rudiedirkx/F8qSq/show/

Inside the event handler, you’ll need to know:

cancel the event: e.preventDefault() (and maybe even e.stopPropagation() ).

I think it’s better to not override the browser’s scrolling behaviour. Only cancel it when applicable.

It’s probablt not perfectly xbrowser, but it can’t be very hard. Maybe Mac’s dual scroll direction is tricky though.

Use below CSS property overscroll-behavior: contain; to child element

see if this help you:

edit:

A less hacky solution, in my opinion is to set overflow hidden on the body when you mouse over the scrollable div. This will prevent the body from scrolling, but an unwanted «jumping» effect will occur. The following solution works around that:

You could make your code smarter if needed. For example, you could test if the body already has a padding and if yes, add the new padding to that.

In the solution above there is a little mistake regarding Firefox. In Firefox «DOMMouseScroll» event has no e.detail property,to get this property you should write the following ‘e.originalEvent.detail’.

Here is a working solution for Firefox:

here a simple solution without jQuery which does not destroy the browser native scroll (this is: no artificial/ugly scrolling):

Here is my solution I’ve used in applications.

I disabled the body overflow and placed the entire website html inside container div’s. The website containers have overflow and therefore the user may scroll the page as expected.

I then created a sibling div (#Prevent) with a higher z-index that covers the entire website. Since #Prevent has a higher z-index, it overlaps the website container. When #Prevent is visible the mouse is no longer hovering the website containers, so scrolling isn’t possible.

You may of course place another div, such as your modal, with a higher z-index than #Prevent in the markup. This allows you to create pop-up windows that don’t suffer from scrolling issues.

This solution is better because it doesn’t hide the scrollbars (jumping affect). It doesn’t require event listeners and it’s easy to implement. It works in all browsers, although with IE7 & 8 you have to play around (depends on your specific code).