jQuery兼容IE和Chrom浏览器-得到页面滚动条的坐标值
生活随笔
收集整理的這篇文章主要介紹了
jQuery兼容IE和Chrom浏览器-得到页面滚动条的坐标值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們先來看一下代碼:
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css">.all {width:100%;height:120%;}.scroll {width:200px;height:100px;overflow: scroll;}</style></head><body><div class="all"><div class="scroll">this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/></div><button id="btn1">得到scrollTop的坐標</button><button id="btn2">設置scrollTop的坐標</button></div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$('#btn1').click(function() {console.log('以下是滾動條的位置');console.log($('html').scrollTop());});</script></body> </html>當我們使用Chrome瀏覽器滾動瀏覽器的滾動條時發現是每次取的值都是0，如下:
沒有滾動的時候
滾動之后
但是在IE瀏覽器就可以取到值
所以我們將代碼做一下修改，修改部分如下:
<script type="text/javascript">$('#btn1').click(function() {console.log('以下是滾動條的位置');console.log($('body').scrollTop());}); </script>我們發現Chrome瀏覽器可以取到值了
經過小編測試部分版本的IE瀏覽器的值為0
所以我們看最終的代碼:
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css">.all {width:100%;height:120%;}.scroll {width:200px;height:100px;overflow: scroll;}</style></head><body><div class="all"><div class="scroll">this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/>this is niuniu love<br/></div><button id="btn1">得到scrollTop的坐標</button><button id="btn2">設置scrollTop的坐標</button></div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$('#btn1').click(function() {console.log('以下是滾動條的位置');console.log($('body').scrollTop()+$('html').scrollTop());});</script></body> </html>總結
以上是生活随笔為你收集整理的jQuery兼容IE和Chrom浏览器-得到页面滚动条的坐标值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery 中jQuery/$的数据类
- 下一篇： jQuery-点击按钮实现回到顶部的两种