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

最新推荐文章于 2023-09-26 10:16:56 发布

原创最新推荐文章于 2023-09-26 10:16:56 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #前端 #ViewUI

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何通过JavaScript判断网页中是否出现了水平或垂直滚动条。针对不同浏览器特性，提供了兼容性的解决方案，并强调了doctype声明的重要性。

横向滚动条：

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

if (document.documentElement.clientWidth < document.documentElement.offsetWidth){}

竖向滚动条：

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

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

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

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

如果浏览器有边框，假如是4px，即：

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

document.documentElement.offsetHeight

ie8下不识别。

应该用：

if (document.documentElement.clientHeight < document.body.offsetHeight ) {  
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_7121

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

laugh666的博客

10-03

832

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

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

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

laugh666的博客

09-26

551

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

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

10-18

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

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 判断页面是否有滚动条的简单方法

【大漠孤烟】的专栏

06-19

2308

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

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

10-23

总结来说，本文介绍了一个利用JavaScript判断页面是否有滚动条的函数实现，它通过读取和判断页面元素的滚动位置属性来完成判断。这不仅对于理解页面布局特性有所帮助，也对于提高用户界面的友好性和交互性具有重要...

js判断滚动条是否已到页面最底部或顶部实例

03-16

在本文中，我们将深入分析如何使用JavaScript来判断滚动条是否到达了页面的最顶部或最底部，并探讨了如何实现这一功能的技巧。首先，我们来理解什么是可视区域（viewport）。可视区域指的是用户在浏览器窗口中可以...

js判断是否有滚动条

寂寥人生

07-08

2069

解决滑动穿透

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

风如白话的博客

05-15

3702

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

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

weixin_33759269的博客

01-04

354

2019独角兽企业重金招聘Python工程师标准>>> ...

js判断页面是否有滚动条

前端界的小学生

07-15

1087

js判断页面是否有滚动条 其实只需要一行 JS 就可以，测试兼容 IE7 function hasScrollbar() { return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); } 一般情况下，使用 document.body.scrollHeight > window.innerHeight 就可以判断。但是在 IE7，IE8 中 win

如何判断页面是否有滚动条？

qq_38152997的博客

08-02

4191

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

js判断浏览器是否有滚动条

samete的专栏

03-15

2364

不多说，直接贴代码： // 判断是否有滚动条 var isScroll = function (el) { // test targets var elems = el ? [el] : [document.documentElement, document.body]; var scrollX = fal

js判断是否出现滚动条

u010090557的博客

07-16

533

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

判断页面中是否有滚动条

weixin_30549175的博客

12-09

587

<!doctype html> <html><head> <meta charset="utf-8"> <title>一篇很长的文章</title> <script language="javascript" src="jquery-1.4.4.min.js"></scri...