今天无聊，帮一个网友解决一个很无聊的问题，用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){

//执行相关脚本。

｝

呵呵，问题搞定，其实我觉得这是个非常无聊的问题，我想没几个人想着去判断滚动条的有无，没有什么实际意义，在这里帮助一下那些需要这功能的朋友走出误区，免得浪费大量时间去网上搜而无果。

JS判断页面是否出现滚动条的更多相关文章

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

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

  2. js判断页面在pc端打开还是移动端打开

    js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...

  3. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  4. js判断页面放大缩小

    项目中,经常会碰到页面被放大或者缩小,导致页面显示错误,js可以判断页面放大缩小. // 若返回100则为默认无缩放,如果大于100则是放大,否则缩小 function detectZoom (){ ...

  5. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  6. 用js判断页面刷新或关闭的方法

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...

  7. js 判断页面是否加载完成

    javascript代码如下: document.onreadystatechange = subSomething; //当页面加载状态改变的时候执行这个方法 function subSomethi ...

  8. JS判断页面是在浏览器还是微信打开

    一.Navigator对象 1.获取用户的浏览器信息. let ua = navigator.userAgent.toLowerCase(); 打印一下ua的结果: Mozilla/5.0 (Maci ...

  9. JS判断页面是否加载完成

    用 document.readyState == "complete" 判断页面是否加载完成 传回XML 文件资料的目前状况. 基本语法intState ＝ xmlDocument ...

随机推荐

  1. [TJOI2011]构造矩阵

    考虑优化贪心,不回溯,对于每一位,你都判一下放0的话后面是否有解,用网络流判是否可以完美匹配就行了. 但这样时间复杂是错的,所以不必每次都重新建图,现在原来的图中看一下该行列是否已经匹配,若没有,则强 ...

  2. 利用Python攻破12306的最后一道防线

    各位同学大家好,我是强子,好久没跟大家带来最新的技术文章了,最近有好几个同学问我12306自动抢票能否实现,我就趁这两天有时间用Python做了个12306自动抢票的项目,在这里我来带着大家一起来看看 ...

  3. 自学Linux Shell3.1-帮助命令man

    点击返回 自学Linux命令行与Shell脚本之路 3.1-帮助命令man 1.man命令概述 默认bash shell提示符是美元符号($),这个符号表明shell在等待用户输入. Linux ma ...

  4. 洛谷 P1430 序列取数 解题报告

    P1430 序列取数 题目描述 给定一个长为\(n\)的整数序列\((n<=1000)\),由\(A\)和\(B\)轮流取数(\(A\)先取).每个人可从序列的左端或右端取若干个数(至少一个), ...

  5. happens-before

    happens-before是JMM最核心的概念.对应Java程序员来说,理解happens-before是理解JMM的关键. JMM的设计 首先,让我们来看JMM的设计意图.从JMM设计者的角度,在 ...

  6. CF 681

    我太水了...... 这是一场奇差无比的CF. A,看题意有困难,实际上还是很水的. B,枚举 1234567 和 123456 的个数,时间复杂度1e6以下 C,业界毒瘤模拟题.最TM坑的是还要输出 ...

  7. 【洛谷P3586】LOG

    题目大意:维护一个集合,支持单点修改.查询小于 X 的数的个数.查询小于 X 的数的和. 题解:学习到了动态开点线段树.对于一棵未经离散化的权值线段树来说,对于静态开点来说,过大的值域会导致不能承受的 ...

  8. IDEA进行远程调试

    biz-test本地调用测试环境01机器上面的needle项目,卡在查询数据库的地方(Jade停住不走了) 首先配置 相关项目 的服务器端部署jvm参数: 在needle的config.pp.temp ...

  9. Vetur：VSCode下强大的Vue开发工具

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优 ...

  10. 搞定 Kubernetes 基于flannel 的集群网络

    .Docker网络模式 在讨论Kubernetes网络之前,让我们先来看一下Docker网络.Docker采用插件化的网络模式,默认提供bridge.host.none.overlay.maclan和 ...