Prevent Scroll in one direction if scrolled to top or bottom div

Question

I have a scrollable div and I would like to prevent the user from scrolling down any farther once they reach a certain point and only allow them to scroll back up without jquery

fixed.addEventListener('mousewheel', function(e) {
   if((fixed.scrollTop;+500)>fixed.scrollHeight;){
      e.preventDefault();
      }
   }, false);

Currently what I have does the job of stopping scrolling all together once it reaches that point. Once it enters the if statement I want the user to be able to scroll back up. Not stop all scrolling

You need to figure out the initial scroll direction and then put the prevent default if the direction is the same and the height is reached. Have a look at this for figuring out the direction: http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event — Pete, Oct 20 '16 at 14:42

score 1 · Accepted Answer · answered Oct 20 '16 at 14:43

The mousewheel event is not standard, see https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

However even if it was, your solution wouldn't cover touch devices for example, or scrolling by dragging the scroll bar. And in general once scrolling is in progress it can't be stopped, you can prevent it from happening in the first place, for example on touch devices:

window.addEventListener('touchmove', function(e) {
    e.preventDefault();
});

However it is very bad practice as it turns off scroll and zoom completely.

The problem you have is that you cannot determine the direction of scroll before it has happened. The only way I would see it is to look at the scroll event, determine if the page scroll is upwards or downwards and then set scrollTo on the element if you would like that not to happen, but it may cause an awkward jump.

For example:

var lastScrollPosition = fixed.scrollTop;

fixed.addEventListener('scroll', function () {
    var goingDown = (fixed.scrollTop - lastScrollPosition) > 0;
    /* If scrolling down the new scrollTop will be larger
        than the last one so it will be a positive number
        and we want to stop that from happening
    */
    var maximumScrollReached = (fixed.scrollTop + 500 > fixed.scrollHeight);

    if (goingDown && maximumScrollReached) {
        fixed.scrollTop = lastScrollPosition; // Or whatever maximum you want to allow
    }

    lastScrollPosition = fixed.scrollTop;
});

Mind that the scroll event can fire A LOT, so you might consider wrapping it in some kind of debounce function like https://lodash.com/docs/4.16.4#debounce or write one yourself

Also why are you considering this? There might be better solutions to your original problem, maybe some pure CSS ones.

Thanks for the help. I am considering it cause I am working on an app that is overlaid on top of another app. Kinda like how facebook message chats pop up on the bottom of a screen. The issue is that when the scroll hits the bottom or top of the scroll window it starts scrolling the page it is overlaid on also. My app is in React and I have no control over any of the other application styles — Mike W, Oct 20 '16 at 14:47
Yeah that will be the case when using a webview, not sure of a better way to fix except for maybe switching to react native which doesn't run inside a webview. — Marcin Wolniewicz, Oct 24 '16 at 20:06

Prevent Scroll in one direction if scrolled to top or bottom div

1 Answers1