今天无聊，帮一个网友解决一个很无聊的问题，用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. MT【220】三次方程必有实根

    设$f(x)=x^2+ax+b,g(x)=x^2+cx+d$,如果$f(g(x))=g(f(x))$没有实根,求证:$b\ne d$ 分析:$f(g(x))-g(f(x))=2(c-a)x^3+\cd ...

  2. 洛谷P3345 [ZJOI2015]幻想乡战略游戏（动态点分治，树的重心，二分查找，Tarjan-LCA，树上差分）

    洛谷题目传送门 动态点分治小白,光是因为思路不清晰就耗费了不知道多少时间去gang这题,所以还是来理理思路吧. 一个树\(T\)里面\(\sum\limits_{v\in T} D_vdist(u,v ...

  3. Android Selector 与 Shape 基本用法

    分类: Android2011-07-19 11:07 7513人阅读 评论(4) 收藏 举报 androidencodingbutton测试c 1:Selector drawable的item中可以 ...

  4. A1025. PAT Ranking

    Programming Ability Test (PAT) is organized by the College of Computer Science and Technology of Zhe ...

  5. 【洛谷P1486】郁闷的出纳员

    题目大意:维护一个平衡树,支持插入一个数,删除小于一个值的所有数,K 大值查询,每个节点权值加减一个数. 题解:所有节点权值加减操作可以考虑直接维护一个全局标记,删除小于一个值的所有数字为一个二分的过 ...

  6. （转）如何修改maven的默认jdk版本

    背景:在maven的配置文件中配置编译的jdk插件,就不需要在eclipse中进行重新的指定了. 问题 1.创建maven项目的时候,jdk版本是1.5版本,而自己安装的是1.7或者1.8版本. 2. ...

  7. 跟我一起学习vue2（学习工程目录）[三]

    查看生成的my-project的工程目录 首先看 build是最终发布的代码存放位置. 我查看了一下目录,里面都是Js文件 config目录里面主要是配置目录,包括端口号.如果开的项目多,可以进入in ...

  8. html中空格字符实体整理

    摘要 浏览器总是会截短 HTML 页面中的空格.如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个.如需在页面中增加空格的数量,您需要使用 字符实体. 本篇就单介绍空格的字 ...

  9. loadrunner之Java Vuser协议脚本编写

    步骤:1.根据自己使用的lr版面选择jdk 1)LR11   1.6   32位 2)LR12   1.7   32位 2.安装好jdk,并搭建java环境变量,安装好java代码编写工具 3.在sr ...

  10. 记录一次nginx的upstream的配置信息

    nginx的upstream的配置信息 upstream qq.xiaoyu.cn { server 192.168.1.139:80 max_fails=3 fail_timeout=30s; se ...