当前位置:首页 > 电脑知识 > 正文内容

一看就会(js判断有没有滚动条)js判断div是否有滚动条,js判断元素是否有滚动条的方法,js判断元素是否有滚动条的方法,

sauo3年前 (2022-09-17)电脑知识86

前端网页的有事动态事件中,需要我们判断某些DIV元素是否有滚动条,下面就详细的介绍一下。

js 判断是否有滚动条的方法

js 判断页面或DIV是否滚动条,其解决思路非常的简单,首先使用js控制元素先滚动一定值,然后再取当前滚动值是否大于0,如果大于0就说明有滚动条,等于0说明没有滚动成功则自然是没有滚动条

例1:js判断页面是否有滚动条

JavaScript
// 飞鸟慕鱼博客 feiniaomy.com document.documentElement.scrollTop = 10; //先滚动一下页面的滚动条 if (document.documentElement.scrollTop > 0) { //判断滚动条是否发生了偏远 console.log(有滚动条); } else { console.log(无滚动条); } document.documentElement.scrollTop = 0; //恢复滚动条到顶部复制

例2:JS判断某个指定DIV元素是否有滚动条

Markup
<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判断整个页面是否有滚动条

JavaScript
// 飞鸟慕鱼博客 feiniaomy.com $("body").scrollTop(5); //控制滚动条下移 5px if( $("body").scrollTop() > 0 ){ //判断滚动条是否发生了偏移 alert("有滚动条"); }else{ alert("没有滚动条"); } $("body").scrollTop(0);//恢复滚动条返回顶部复制

例2:jq 判断指定元素是存在滚动条

JavaScript
<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>复制

本文链接:http://blog.sauo.top/?id=305 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=305

分享给朋友:

“一看就会(js判断有没有滚动条)js判断div是否有滚动条,js判断元素是否有滚动条的方法,js判断元素是否有滚动条的方法,” 的相关文章

新鲜出炉(ubuntu系统与centos系统区别)ubuntu还是centos,centos系统与ubuntu系统的区分,centos系统与ubuntu系统的区分,

免费领取腾讯云服务器! Linux的发行版有很多,而我们经常使用的为centos与ubuntu,下面这篇博文就说说这两个系统的发源与区别。 CentOS CentOS(Community Enterprise Operati...

干货分享(php file_get_contents curl)php file_get_contents post,php file_get_contents(): SSL operation failed with code 1. OpenSSL Error message.....,php file_get_contents(): SSL operation failed with code 1. OpenSSL Error message.....,

免费领取腾讯云服务器! 在调试php脚本代码时,发现使用 file_get_contents() 函数请求HTTPS的网址链接时出现了报错,其报错代码如下面所示“file_get_contents(): SSL operation failed with...

这都可以(PHP百度百科)pHp是什么,php中关于strtotime函数31日取前几个月日期的BUG,php中关于strtotime函数31日取前几个月日期的BUG,

免费领取腾讯云服务器! 在使用php脚本中的 strtotime 函数取前几个月的日期时,发现每到31日时,取出的前几个月的日期都会出现错误。仔细检查了一下,发现在利用 strtotime 函数取前几个月的日期时,给 strtotime 函数的参数并不规范...

一篇读懂(PHP for循环)php跳出循环的语句,php中的几种循环语句,php中的几种循环语句,

免费领取腾讯云服务器! 列举几种php脚本中常用的几种循环语句,比如,for,foreach,do....while 等。 php for循环 for循环在很多语言中都经常用到,比如js语言,c语言,java语言等。...

不看后悔(php全局变量有哪些)php全局变量和局部变量的区别,php全局变量与js全局变量的区别,php全局变量与js全局变量的区别,

免费领取腾讯云服务器! 因为经常写php与js代码,有时候使用全局变量的时候经常的混淆,这篇文章就来说说js中的全局变量与php中的全局变量的区别。 js全局变量与php全局变量的区别 php全局变量 php...

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

免费领取腾讯云服务器! 有个小需求,需要使用php代码对图片进行颜色调整,比如变成灰色,改变图片的亮度,对比度等等。而php中就内置了一个图片的滤镜函数 imagefilter() ,下面就来具体说说这个函数的用法。 php imagefi...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。