Jquery scroll () method to distinguish between browser horizontal and vertical scroll bars

This article mainly introduces how to use the jquery scroll () method to distinguish the browser's horizontal and vertical scroll bars. For more information, see

Jquery in the scroll () event, I want to judge whether the current scroll bar is still vertical;

I started to use the global variable to record the scrollTop value for determination. If the front and back values are not changed, the system will scroll horizontally,

However, if there are multiple scroll bars on the page, multiple global variables are required to control them. How can this problem be determined?

Scroll jquery differentiate between horizontal and vertical scroll bars

 

Solution:

Each sets the scrollLeft/scrollTop of the selected object of the selector at one time, and then binds the scroll event. When triggered, obtain the scrollLeft/scrollTop and the initialized scrollLeft/scrollTop to determine whether it is horizontal or vertical, update the scrollLeft/scrollTop of OSS at the same time.

 

The Code is as follows:

<Style>

. C {height: 120px; width: 120px; overflow: auto; border: solid 1px black; margin-bottom: 5px ;}

</Style>

 

<Div class = "B"> 111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111

<Br> 1111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111 </div>

<Div class = "B"> 111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111

<Br> 1111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111 </div>

<Div class = "B"> 111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111

<Br> 1111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111 </div>

<Div class = "B"> 111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111

<Br> 1111111111111111111 <br> 1111111111111111111 <br> 1111111111111111111 </div>

 

 

<Script src = "/js/jquery. js"> </script>

 

<Script>

$ ('Div '). each (function () {$ (this ). data ('slt', {sl: this. scrollLeft, st: this. scrollTop });}). scroll (function (){

Var sl = this. scrollLeft, st = this. scrollTop, d = $ (this). data ('slt ');

If (sl! = D. sl) alert ('scroll horizontally ');

If (st! = D. st) alert ('scroll vertically ');

$ (This). data ('slt', {sl: sl, st: st });///

})

</Script>