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

    解题思路: 之前看到的骚操作,主要思想就是把两个面合在一起看成两个点相连,最后只要找到一个环就可以无限克隆这个环使得无限延迟. 把符号变成数字如A-变为0,A+变为1,则0^1=1 ,这两个符号可以通 ...

  2. hg和git命令对照表

    hg和git命令对照表 来源 https://github.com/sympy/sympy/wiki/Git-hg-rosetta-stone Git hg rosetta stone   muxat ...

  3. WinRM不起作用 Connecting to remote server failed with the following error message : WinRM cannot complete the operation

    当我运行下面的 powershell  脚本时: $FarmAcct = 'domain\user'  $secPassword = ConvertTo-SecureString 'aaa' -AsP ...

  4. Shell基础知识（三）

    Shell中变量的作用域: 在当前Shell会话中使用,全局变量. 在函数内部使用,局部变量. 可以在其他Shell会话中使用,环境变量. 局部变量: 默认情况下函数内的变量也是全局变量 #!/bin ...

  5. tensorflow GPU版本安装及配置

    经检测速度大幅度上升,不枉费我折腾了这么久,最坑的就是网上教程.书都没有写将cuda的bin加入全局变量,还是根据报错信息推出来的. 1.cuda9.0下载安装 https://developer.n ...

  6. Mysql distinct、group by

    具体业务场景:根据某些字段组合去重得到所有字段结果. 遇到的error:sql_mode=only_full_group_by. 原因是mysql配置问题. distinct: distinct这个关 ...

  7. 前端学习 -- Html&Css -- 层级和透明度

    层级 如果定位元素的层级是一样,则下边的元素会盖住上边的. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示. ...

  8. Codeforces Round #548

    没打,简单补档 C.Edgy Trees 容斥,把黑边断掉数联通块,每个联通块贡献$siz^k$ #include<cstdio> #include<cstring> #inc ...

  9. shiro项目从 log4j1X 迁移到 log4j2X

    先说一下,shiro依赖的项目不是log4j 而是 SLF4J框架. 我们原来用1X版本的jar包如下: log4j-1.2.17.jar slf4j-api-1.7.22.jar slf4j-log ...

  10. Js中this机制全解

    JavaScript中有很多令人困惑的地方,或者叫做机制. 但是,就是这些东西让JavaScript显得那么美好而与众不同. 比方说函数也是对 象.闭包.原型链继承等等,而这其中就包括颇让人费解的th ...