CODEWITHSUNDEEP
javascriptscrollpreventdefault
Vesmy
Vesmy

Reputation: 1278

JavaScript onScroll event.preventDefault()

Is there any way to use preventDefault on scroll event? Container must have overflow-y: scroll. I wouldn't like to use mousewheel preventDefault, because then I would have to write solution for mouse, keyboard, touch displays and scrollbar.

So, how to disable scrolling in <div> below? (jsfiddle)

document.getElementById('container').onscroll = function(event) {
   event.preventDefault();
};
div {
  height: 300px;
  overflow-y: scroll;
  width: 400px;
}
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Upvotes: 2

Views: 2702

Answers (1)

Angelos Chalaris
Angelos Chalaris

Reputation: 6747

You can use scrollTo() on the specific element and the set its scroll to the previous position. Assuming that the original position is (0,0), you can use that. If, however, it changes somehow, you will need to extend the logic to accommodate for that change. Bear in mind that there is a slight scrolling hiccup that is visible when the user tries to scroll.

Working demo

document.getElementById('container').onscroll = function(event) {
   event.preventDefault();
   document.getElementById('container').scrollTo(0,0);
};
div {
  height: 300px;
  overflow-y: scroll;
  width: 400px;
}
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Note: I strongly recommend against this, as intercepting scroll events can cause a lot of trouble with usability of your page, but if you are sure about it, you do what you must!

Upvotes: 2

Related Questions