js判断是否出现滚动条

最新推荐文章于 2022-07-08 12:37:55 发布
最新推荐文章于 2022-07-08 12:37:55 发布
阅读量426 收藏
点赞数
分类专栏： web前端 文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010090557/article/details/84459250
版权

当可视区域小于页面的实际高度时，判定为出现滚动条，即：

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;

要使用 document.documentElement ，必须在页面头部加入声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

其实，这段代码是不起作用的，因为他没考虑到一个问题，就是浏览器的边框，当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的，浏览器的边框是2个像素，所以这时无论在任何情况下clientHeight 始终是小于offsetHeight的，这就使得即使没有滚动条它也为true,因此我们要修正这个错误，代码应该这样改，在offsetHeight上减去4个像素，即：

if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){

//执行相关脚本。

}

还有，这里要搞清楚，上面这代码是判断横向滚动条的，我们一般要判断的是纵向滚动，代码如下：

 

if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){

//执行相关脚本。

｝

李雨泽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS判断页面是否出现滚动条的方法
10-23
主要介绍了JS判断页面是否出现滚动条的方法,涉及javascript针对页面元素的读取与判定实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js判断页面出现滚动条
weixin_33810006的博客
09-24 295
当可视区域小于页面的实际高度时，判定为出现滚动条 当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的，浏览器的边框是2个像素， if (document.documentElement.clientHeight &lt; document.documentElement.offsetHeight-4){ //执行   出现纵向滚动条时  相关脚本。 }   if...
js判断是否有滚动条
寂寥人生
07-08 1760
解决滑动穿透
js 判断页面是否存在滚动条
风如白话的博客
05-15 3523
js 判断页面是否存在滚动条 hasScrollbar() { return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) }
js判断是否存在滚动条
爱吃鱼油
10-15 6906
window.onload=function(){ var obj=document.getElementById("test-table-body"); console.log(obj.offsetHeight); console.log(obj.scrollHeight); console.log(obj.clientHeight); //offsetHeight=scrollHei
通过 JS 判断页面是否有滚动条的实现方法
01-19
在判断滚动条的同时也需要计算滚动条的宽度，通过本篇文章一并与大家分享。 为什么要判断滚动条 判断滚动条的需求在弹窗插件中用的较多，因为弹窗大多会添加 overflow: hidden 的属性，如果页面比较长的话，添加这...
JS简单判断滚动条的滚动方向实现方法
12-10
本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考，具体如下： 以下代码实现判断页面的滚动条的滚动方向； var sign = 80;//定义默认的向上滚与向下滚的边界 [removed] = [removed] = ...
JS判断页面是否出现滚动条
huang100qi的专栏
09-14 6704
JS判断页面是否出现滚动条 要使用 document.documentElement ，必须在页面头部加入声明：   if (document.documentElement.scrollHeight> document.documentElement.clientHeight){ //执行相关脚本。 }
javascript 显示隐藏滚动条
08-18
js javascript 显示隐藏滚动条 隐藏滚动条 显示滚动条，可以动态的改变，这样有利于控制用户操作。而且这个小小的demo里面获得body或者Element对象的方法也是很特别的。或者说是有意思。
通过 JS 判断页面是否有滚动条的简单方法
kkfd1002的博客
04-16 2081
前言最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的宽度，通过本篇文章一并与大家分享。为什么要判断滚动条判断滚动条的需求在弹窗插件中用的较多，因为弹窗大多会添加 overflow: hidden 的属性，如果页面比较长的话，添加这个属性之后页面会有晃动。...
js判断页面滚动方向
爱吃水果和蔬菜__yaya的博客
03-04 2808
开发中有很多根据滚动来判断的逻辑，这时候最重要的一个步骤就是先判断滚动方向，然后才能进行后续逻辑 我把自己最近项目中用到的代码放在下面（项目用的vue），各位酌情修改 data() { return { initTop: 0 } } methodds:{ scrollEvent() { // 判断滚动方向 let scrollTop = this.$refs["room"].wrap.scrollTop; let scroll =
js scroll 判断 横向滚动还是 纵向滚动_浏览器的一些“滚动”行为鉴赏
weixin_39736007的博客
11-29 2333
分类按照我的个人理解，滚动分全局滚动(浏览器窗口)跟局部滚动(自定义的盒子)，以下内容绝大部分都是指全局滚动，局部滚动的话获取指定的DOM再调用相应的API即可✅如何设置全局滚动条高度最常用的方法：window.scrollTo(0, 0); // or window.scrollTo({ left: 0, top: 100 }); 复制代码也可以利用相对滚动设置：window.scrollB...
如何判断页面是否有滚动条？
qq_38152997的博客
08-02 3962
横向滚动条： 当可视区域小于页面的实际宽度时，判定为出现滚动条，即： if (document.documentElement.clientWidth < document.documentElement.offsetWidth){} 竖向滚动条： 当可视区域小于页面的实际高度时，判定为出现滚动条，即： if (document.documentElement.clientHeight &l...
基于拖放布局的 Twitter Bootstrap 网站生成器
u010090557的博客
05-05 854
简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站？是的，LayoutIt 是一个 Twitter Bootstrap 界面生成器，能够帮助你快速制作出网站和界面模型，同时能够下载生成的网站代码。       好强大！去围观！   http://www.layoutit.com ...
js判断滚动条是否在顶部显示
最新发布
09-09
要判断滚动条是否在顶部显示，可以使用JavaScript来实现。 一种方法是通过比较滚动条的垂直位置是否等于0来判断是否在顶部。可以使用`window.pageYOffset`来...以上就是用JavaScript判断滚动条是否在顶部显示的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值