Use jquery to disable scrolling of the outer scroll bar

This article mainly introduces how jquery can be used to prevent the scrolling of outer scroll bars. The article provides detailed sample code. I believe it is of reference value for your understanding and learning, if you need it, you can refer to it for reference. Let's take a look at it. Preface

Generally, when the internal scroll bar is scroll to both ends, the outer scroll bar will scroll. However, sometimes we want users to scroll only the current area, the scroll bar of the outer (window) can be rolled only when the current area is left. The current area may leave the visible area because you may accidentally scroll too much.

In jquery, the rolling event is scroll, and this event cannot block bubbling and default events. If we want to disable the scroll bar of the window, my policy is: when the mouse enters the current area, the height of the scroll bar of the window is always the height before the mouse enters the front.

The following code:

  
 
 
 
$ (Function () {var scrollTop =-1; // After the mouse enters the area, the height of the current window scroll bar is saved $ ('# main '). hover (function () {scrollTop = $ (window ). scrollTop () ;}, function () {scrollTop =-1 ;}); // After the mouse enters the area, the height of the window scroll bar is forced $ (window ). scroll (function () {scrollTop! ==- 1 & $ (this). scrollTop (scrollTop );})})

As you can see from the code above, I have not blocked the event of the window scroll bar, but the user will re-assign values every time he scrolls.

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. Of course, there may be better methods. Thank you!

For more articles about using jquery to prohibit scrolling of outer scroll bars, refer to PHP!