目录前言 1. 常见的适配方案 2. CSS3 缩放方案 3. 封装一个缩放指令 4. 后记前言 随着前端技术的不断发展、数据中心(中台)之类的概念的不断升级、物联网设备的更新和普及,越来越多的业主(
顺晟科技
2022-09-16 13:14:12
157
前端网页的有事动态事件中,需要我们判断某些DIV元素是否有滚动条,下面就详细的介绍一下。
js 判断是否有滚动条的方法js 判断页面或DIV是否滚动条,其解决思路非常的简单,首先使用js控制元素先滚动一定值,然后再取当前滚动值是否大于0,如果大于0就说明有滚动条,等于0说明没有滚动成功则自然是没有滚动条
例1:js判断页面是否有滚动条
// 顺晟科技博客 feiniaomy.com document.documentElement.scrollTop = 10; //先滚动一下页面的滚动条 if (document.documentElement.scrollTop > 0) { //判断滚动条是否发生了偏远 console.log('有滚动条'); } else { console.log('无滚动条'); } document.documentElement.scrollTop = 0; //恢复滚动条到顶部
例2:JS判断某个指定DIV元素是否有滚动条
<div id="mochu"> <p>顺晟科技博客</p> <p>http://feiniaomy.com</p> </div> <script> // 顺晟科技博客 feiniaomy.com document.getElementById('mochu').scrollTop = 10; //先滚动一下页面的滚动条 if (document.getElementById('mochu') > 0) { //判断滚动条是否发生了偏远 console.log('有滚动条'); } else { console.log('无滚动条'); } document.getElementById('mochu').scrollTop = 0; //恢复滚动条到顶部 </script>jquery 判断是否有滚动条的方法
利用jq来判断html元素是否有滚动条,其解决方法的原理与上面js判断页面或DIV是否有滚动条的原理一样。
例1:jq判断整个页面是否有滚动条
// 顺晟科技博客 feiniaomy.com $("body").scrollTop(5); //控制滚动条下移 5px if( $("body").scrollTop() > 0 ){ //判断滚动条是否发生了偏移 alert("有滚动条"); }else{ alert("没有滚动条"); } $("body").scrollTop(0);//恢复滚动条返回顶部
例2:jq 判断指定元素是存在滚动条
<div id="mochu"> <p>顺晟科技博客</p> <p>http://feiniaomy.com</p> </div> <script> // 顺晟科技博客 feiniaomy.com $("#mochu").scrollTop(5); //控制滚动条下移 5px if( $("#mochu").scrollTop() > 0 ){ //判断滚动条是否发生了偏移 alert("有滚动条"); }else{ alert("没有滚动条"); } $("#mochu").scrollTop(0);//恢复滚动条返回顶部 </script>
30
2022-09
16
2022-09
16
2022-09
16
2022-09
16
2022-09
03
2022-09