JS判断页面是否出现滚动条

最新推荐文章于 2022-07-08 12:37:55 发布

转载最新推荐文章于 2022-07-08 12:37:55 发布 · 5.6k 阅读

转载地址：http://www.cnblogs.com/yazdao/archive/2010/12/06/1897742.html

下面是在网上搜索到的代码：

用JS判断页面是否出现滚动条，在网上看了一些代码，经过验证并不起作用，当可视区域小于页面的实际高度时，判定为出现滚动条，即：

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){

//执行相关脚本。

｝

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jakeorion

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

如何使用 JavaScript 判断页面是否具有滚动条

laugh666的博客

10-03

836

总结一下，通过比较页面的高度和窗口的高度，我们可以使用 JavaScript 判断页面是否具有滚动条。要判断页面是否具有滚动条，我们可以检查页面的高度和窗口的高度之间的差异。如果页面的高度大于窗口的高度，那么页面就有滚动条。接下来，我们将这两个值进行比较，如果页面的高度大于窗口的高度，则说明页面具有滚动条。需要注意的是，上面的代码只是一种简单的判断方法，它假设滚动条出现在页面的根元素上（即。如果你的滚动条出现在其他元素上，你需要相应地修改代码来获取该元素的高度。根据判断结果，我们可以执行不同的操作。

如何使用 JavaScript 判断页面是否出现滚动条

laugh666的博客

09-26

551

它首先获取文档的实际高度，这可以通过比较多个属性的值来获取，确保在不同浏览器中兼容性良好。然后，它获取视口的高度，这可以通过多个属性的值来获取，以确保在不同浏览器中兼容性良好。最后，它比较文档的实际高度和视口的高度，如果文档的实际高度大于视口的高度，则返回。你可以将以上代码嵌入到你的网页中，并根据需要进行相应的操作。例如，你可以根据页面是否出现滚动条来调整元素的样式或布局，或者执行其他与滚动条相关的操作。要判断页面是否出现滚动条，我们可以通过比较文档的实际高度和视口的高度来进行判断。

参与评论您还未登录，请先登录后发表或查看评论

js判断是页面中是否有滚动条

liuchaoxue

03-23

3265

横向滚动条：当可视区域小于页面的实际宽度时，判定为出现滚动条，即： if (document.documentElement.clientWidth < document.documentElement.offsetWidth){} 竖向滚动条：当可视区域小于页面的实际高度时，判定为出现滚动条，即： if (document.documentElement.cli...

JS判断页面是否出现滚动条的方法

10-23

主要介绍了JS判断页面是否出现滚动条的方法,涉及javascript针对页面元素的读取与判定实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

通过 JS 判断页面是否有滚动条的实现方法

01-19

最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的宽度，通过...

js判断是否有滚动条

寂寥人生

07-08

2073

解决滑动穿透

js判断是否存在滚动条

爱吃鱼油

10-15

7021

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判断是否出现滚动条

u010090557的博客

07-16

533

当可视区域小于页面的实际高度时，判定为出现滚动条，即： if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true; 要使用 document.documentElement ，必须在页面头部加入声明： <!DOCTYPE html ...

javascript 显示隐藏滚动条

08-18

js javascript 显示隐藏滚动条 隐藏滚动条 显示滚动条，可以动态的改变，这样有利于控制用户操作。而且这个小小的demo里面获得body或者Element对象的方法也是很特别的。或者说是有意思。

html js 滚动条 变色版

06-14

never Slider Bar html js 滚动条 变色版 html js 滚动条

js 判断页面是否存在滚动条

风如白话的博客

05-15

3703

js 判断页面是否存在滚动条 hasScrollbar() { return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) }

通过 JS 判断页面是否有滚动条的简单方法

【大漠孤烟】的专栏

06-19

2309

前言最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的宽度，通过本篇文章一并与大家分享。为什么要判断滚动条 判断滚动条的需求在弹窗插件中用的较多，因为弹窗大多会添加overflow: hidden的属性，如果页面比较长的话，添加这个属性之后页面会有晃动。为了增强用户体验，通过判断是否有滚动条而添加margin-left属性以抵消overf...

html 判断滚动条,jquery判断是否出现滚动条？

weixin_28759537的博客

06-07

393

下面就为大家带来一篇jQuery判断是否存在滚动条的简单方法。分享给大家，也给大家做个参考，一起来看看吧。jquery判断是否出现滚动条？一、判断可视区域是否超过实际高度，超过一定存在if ($(window).height() < $(document).height() ) {alert('出现滚动条')}使用原生JavaScript的写法if (document.documentEle...

jQuery判断是否存在滚动条

最新发布

10-11

在Vue中判断是否出现滚动条，可从不同维度着手。对于特定元素，可通过判断该元素的`scrollHeight`与`clientHeight`（垂直方向）或`scrollWidth`与`clientWidth`（水平方向）的大小关系来确定是否出现滚动条，同时要注意排除`overflow`设置为`hidden`的情况；对于页面整体，则可通过比较`document.documentElement`或`document.body`的相关属性来判断。 ### 判断特定元素是否出现滚动条 可以封装一个函数`hasScrolled`来判断元素是否出现滚动条，该函数会考虑元素的`overflow`属性设置。以下是代码示例： ```javascript function hasScrolled(ele, dir = "vertical") { // 判断的方向是否设置了overflow: hidden; let style = window.getComputedStyle(ele); if ( (dir === "vertical" && style.overflowY === "hidden") || (dir === "horizontal" && style.overflowX === "hidden") ) return false; // 在判断完overflow不为hidden后，再通过两个属性来判断。 if (dir === "vertical") { return ele.scrollHeight > ele.clientHeight; } else { return ele.scrollWidth > ele.clientWidth; } } export default { mounted() { const element = this.$refs.dom; // 假设通过ref获取元素 const hasVerticalScroll = hasScrolled(element, "vertical"); const hasHorizontalScroll = hasScrolled(element, "horizontal"); console.log('是否有垂直滚动条:', hasVerticalScroll); console.log('是否有水平滚动条:', hasHorizontalScroll); } } ``` 在上述代码中，`hasScrolled`函数接收元素`ele`和方向`dir`作为参数，通过`window.getComputedStyle`获取元素的样式，判断`overflow`属性是否为`hidden`，若不为`hidden`，则比较`scrollHeight`与`clientHeight`或`scrollWidth`与`clientWidth`的大小，以此确定是否出现滚动条。在`mounted`钩子中，通过`$refs`获取元素并调用`hasScrolled`函数进行判断。 ### 判断页面整体是否出现滚动条 可以通过比较`document.documentElement`或`document.body`的`scrollHeight`与`clientHeight`来判断页面是否出现垂直滚动条。以下是代码示例： ```javascript export default { mounted() { const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; const hasScrollbar = scrollHeight > clientHeight; console.log('页面是否有垂直滚动条:', hasScrollbar); } } ``` 在上述代码中，在`mounted`钩子中获取`document.documentElement`或`document.body`的`scrollHeight`和`clientHeight`，比较两者大小来判断页面是否出现垂直滚动条。