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

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

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

前端网页的有事动态事件中,需要我们判断某些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安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

免费领取腾讯云服务器! 安装了一个ubuntu系统,想着在内网中用ssh进行远程连接管理。下面这篇博文就说说如果在ubuntu系统中安装ssh远程管理服务。 ubuntu 安装ssh服务器的方法 1、安装 openssh-s...

全程干货(查看php是否启动)查看php是否支持rar解压,查看php是ts版本还是nts版本的方法,查看php是ts版本还是nts版本的方法,

全程干货(查看php是否启动)查看php是否支持rar解压,查看php是ts版本还是nts版本的方法,查看php是ts版本还是nts版本的方法,

免费领取腾讯云服务器! 今天有用户来询问php的ts版本与php的nts版本的区别是什么,怎么去查看自己安装的php服务是ts版本还是nts版本,下面博文就来详细的说一下。 php ts版本与nts版本的区别 php官方提供...

这都可以?(常用正则表达式大全)常用正则表达式大全图片,常用正则表达式大全,常用正则表达式大全,

免费领取腾讯云服务器! 网上收集了一些常用的正则表达式,基本上都全,需要的可以拿去了。 关于号码的正则表达式 QQ号正则表达式 BASIC /^[1-9][0-9]{...

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

免费领取腾讯云服务器! 上两篇博文,分别写了在window系统下获取文件md5值的方法与mac苹果系统下获取文件md5值的方法,今天这篇博文就写一下在linux系统下获取文件md5值的方法。 Linux系统下获取文件md5值的方法...

速看(mac txt文件怎样新建)mac新建一个txt文件,Mac 新建TXT文件的方法,Mac 新建TXT文件的方法,

速看(mac txt文件怎样新建)mac新建一个txt文件,Mac 新建TXT文件的方法,Mac 新建TXT文件的方法,

免费领取腾讯云服务器! 有个刚用mac电脑的同事来问了一个很基础的问题,如何在mac电脑上创建txt纯文本文件,就告诉他了一种不借助第三方软件的方法,下面就来分享一下。...

奔走相告(js判断上传文件大小)java获取上传文件大小,js获取上传文件类型以及大小的方法,js获取上传文件类型以及大小的方法,

免费领取腾讯云服务器! 前端web上传文件时,需要在上传之前判断一下文件的类型以及文件的大小,HTML为前端的标记语言是无法做到这一点,只能使用javascript 动态脚本代码来实现。 js获取上传文件大小的方法 示例代码...

发表评论

访客

看不清,换一张

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