Home > Web Front-end > JS Tutorial > body text

jquery scroll() method to distinguish horizontal and vertical scroll bars_jquery

WBOY
Release: 2016-05-16 16:53:38
Original
1760 people have browsed it

In the scroll() event of jquery, I want to determine whether the current scroll bar is horizontal or vertical;
I started to use global variables to record the value of scrollTop to judge. If the front and rear values ​​​​do not change, it means horizontal scrolling,
But if there are multiple scroll bars on the page, multiple global variables are needed to control them. How to judge?
scroll jquery distinguishes between horizontal and vertical scroll bars

Solution:
Just set the scrollLeft/scrollTop of the selected object in the selector once each, and then bind the scroll event. When triggered, get the scrollLeft/scrollTop and compare it with the initialized scrollLeft/scrollTop to determine whether it is horizontal or vertical. At the same time Update scrollLeft/scrollTop of object storage

Copy code The code is as follows:

111111111111111111
111111111111111111111111111111111111111 >1111111111111111111
1111111111111111111
1111111111111111111

111111111111111111
1111111111111111111111111111111111111
1111111111111111111
11111111 11111111111
1111111111111111111
111111111111111111

1111111111111111111111111111111111111
1111111111111111111
1111111111111111111 111111
111111111111111111

1111111111111111
111111111111111111
11111111111 11111111111111111111111111
1111111111111111111
1111111111111111111


<script><br>$('div').each(function(){$(this).data('slt',{sl:this.scrollLeft,st:this.scrollTop});} ).scroll(function(){<br> var sl=this.scrollLeft,st=this.scrollTop,d=$(this).data('slt');<br> if(sl!=d.sl) alert('horizontal scroll');<br> if(st!=d.st)alert('vertical scroll');<br> $(this).data('slt',{sl:sl,st:st });///<br>})<br></script>

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!