今天无聊，帮一个网友解决一个很无聊的问题，用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. Java -- JDBC 学习--数据库连接池

    JDBC数据库连接池的必要性 在使用开发基于数据库的web程序时,传统的模式基本是按以下步骤: 在主程序(如servlet.beans)中建立数据库连接. 进行sql操作 断开数据库连接. 这种模式开 ...

  2. 【UVA10140】Prime Distance

    题目大意:求出一个给定区间 [l, r] 内相邻素数之间的最大距离和最小距离. 题解:由于 l, r 的范围太大,没法直接用筛法得出区间的素数.考虑筛出区间的素数等价于筛掉区间内的所有和数, 根据算术 ...

  3. IDEA集成有道翻译插件/maven帮助插件/mybatis插件

    (一)IDEA集成有道翻译插件:https://www.cnblogs.com/a8457013/p/7814335.html 插件下载地址:http://plugins.jetbrains.com/ ...

  4. react与umi

    我们知道umi 是一个编译工具,但它同时也是一个前端框架.它对社区的 webpack,react-router 等进行的封装, 使得我们可以基于它快速搭建一个 React 项目. 第一步:安装umi ...

  5. Educational Codeforces Round 42 (Rated for Div. 2) D. Merge Equals

    http://codeforces.com/contest/962/problem/D D. Merge Equals time limit per test 2 seconds memory lim ...

  6. TCP UDP 数据包过大导致分片情况

    MTU大家都知道,是链路层中的网络对数据帧的一个限制,依然以以太网为例,MTU为1500个字节.一个IP数据报在以太网中 传输,如果它的长度大于该MTU值,就要进行分片传输,使得每片数据报的长度小于M ...

  7. 收到offer!

    今天收到了自己中意的offer,公司在上海,这也意味着自己毕业后的第一份工作也要结束了. 要说再见了,杭州,尽管相处的时间不久,也认识了一些朋友.还得向他们做声道别. 心情滋味难名,短短的一年,自己由 ...

  8. mysql优化问题汇总

    sql优化-->分区-->分表-->垂直分库-->水平分库-->读写分离 分区 关于分区的博客推荐这个:https://blog.csdn.net/youzhouliu/ ...

  9. .NET MVC中的数据验证

    一  概述 关于数据验证和数据注解,是任何软件系统不可小觑的必要模块,主要作用是为了保证数据安全性.防止漏洞注入和网络攻击.从数据验证的验证方式来说,我们一般分为客户端验证和服务端验证(或者两种方式相 ...

  10. oracle 递归和connect by【转】

    oracle递归查询(单表包含多级上下级关系) http://www.cnblogs.com/walk-the-Line/p/4882866.html -- 查找所有第一层(包括)下的所有子节点 -- ...