JS判断页面是否出现滚动条
今天无聊,帮一个网友解决一个很无聊的问题,用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判断页面是否出现滚动条的更多相关文章
- 通过 JS 判断页面是否有滚动条的简单方法
前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁.最终通过参考不同方法,写了一个比较简单的方法.在判断滚动条的同时也需要计算滚动条的 ...
- js判断页面在pc端打开还是移动端打开
js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...
- JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...
- js判断页面放大缩小
项目中,经常会碰到页面被放大或者缩小,导致页面显示错误,js可以判断页面放大缩小. // 若返回100则为默认无缩放,如果大于100则是放大,否则缩小 function detectZoom (){ ...
- js判断页面加载完毕方法
判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...
- 用js判断页面刷新或关闭的方法
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...
- js 判断页面是否加载完成
javascript代码如下: document.onreadystatechange = subSomething; //当页面加载状态改变的时候执行这个方法 function subSomethi ...
- JS判断页面是在浏览器还是微信打开
一.Navigator对象 1.获取用户的浏览器信息. let ua = navigator.userAgent.toLowerCase(); 打印一下ua的结果: Mozilla/5.0 (Maci ...
- JS判断页面是否加载完成
用 document.readyState == "complete" 判断页面是否加载完成 传回XML 文件资料的目前状况. 基本语法intState = xmlDocument ...
随机推荐
- poj1154 【DFS】
LETTERS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8976 Accepted: 4017 Descripti ...
- 自定义git忽略规则
输入命令 >a.o git status 此时我想让git忽略这个文件的更新 输入命令 > .gitignore echo "a.o" >> .gitign ...
- SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API)
虽然 JQuery 也能通过授权header实现跨域, 但SharePoint 提供了更简单的方法,它被实现在SP.RequestExecutor里 .它能访问跨域的服务包括REST AP ...
- Dijstra算法求最短路径
参考博客:http://blog.51cto.com/ahalei/1387799 与Floyd-Warshall算法一样这里仍然使用二维数组e来存储顶点之间边的关系,初始值如下. ...
- unity开源移动库iTween使用完整Demo
public Vector3[] paths; // Use this for initialization void Start () { paths = ] { , , ), , , -) }; ...
- 逆元&欧拉函数
欧拉函数: φ(p)表示小于p的正整数中与p互质的数的个数,称作欧拉函数. 求单个数的欧拉函数时可以利用来求 其中pi为p分解出的质因数,ki表示该质因数的指数 代码: #include<cst ...
- JAVA实现邮件发送功能(账号注册验证码、账号激活等)
第一步,导入JAR包,JAR包下载地址[http://pan.baidu.com/s/1kVRvGyF] 如果是Maven,请直接在Pom文件中加入 <dependency> <gr ...
- 走进HTTP协议之二 基本HTTP机制
本系列第一节,我们回顾了与HTTP协议有关的基本术语和概念,本文将分析HTTP协议的基本原理与机制 HTTP协议的用途 HTTP协议用于客户端与服务器之间的通信,在通信线路两端,必定一端是客户端,另一 ...
- Java内存模型概念简单介绍,想深入自行百度
- Windows环境安装MySQL数据库
Windows环境安装MySQL数据库 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 最近在学习Java语言,开发环境在Windows操作系统上,因此需要在Windows上安装My ...