jquery Scroll () method to differentiate browser horizontal and vertical scroll bars

Source: Internet
Author: User

  This article mainly introduces the method of using the jquery Scroll () method to distinguish the horizontal and vertical scroll bars of browsers, and the friends who need them can refer to the following

jquery in the scroll () event, I want to judge the current scroll bar transverse also portrait; I began to use the global variable record scrolltop value to judge, if the value has not changed before and after the horizontal scrolling, but the page has more than one scroll bar, the number of global variables to control, how to judge? Scroll jquery differentiates horizontal vertical scroll bars   solutions: Each time you set the selector to select the object's Scrollleft/scrolltop, you bind the scroll event, and then the trigger gets the scrollleft/ The scrolltop and initialized scrollleft/scrolltop contrast is judged horizontally or vertically, while the Scrollleft/scrolltop     code for updating object storage is as follows: <style> c{ Height:120px;width:120px;overflow:auto;border:solid 1px black;margin-bottom:5px;} </style>   <div class= "C" >111111111111111111<br>1111111111111111111<br> 1111111111111111111<br>1111111111111111111 <br>1111111111111111111<br>1111111111111111111< br>1111111111111111111</div> <div class= "C" >111111111111111111<br>1111111111111111111<br >1111111111111111111<br>1111111111111111111 <br>1111111111111111111<br>1111111111111111111 <br>1111111111111111111</div> <div class= "C" >111111111111111111<br>1111111111111111111 <br>1111111111111111111<br>1111111111111111111 <br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</ div> <div class= "C" >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 (' horizontal scrolling ');     if (st!=d.st) alert (' Longitudinal scrolling ');     $ (this). Data (' SLT ', {sl:sl,st:st});///}) </script>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.