通过 JS 判断页面是否有滚动条的实现方法

前言

最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的宽度，通过本篇文章一并与大家分享。

为什么要判断滚动条

判断滚动条的需求在弹窗插件中用的较多，因为弹窗大多会添加 overflow: hidden 的属性，如果页面比较长的话，添加这个属性之后页面会有晃动。

为了增强用户体验，通过判断是否有滚动条而添加 margin-left 属性以抵消 overflow: hidden 之后的滚动条位置。

判断是否有滚动条的方法

其实只需要一行 JS 就可以，测试兼容 IE7

function hasScrollbar() {
  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}

一般情况下，使用 document.body.scrollHeight > window.innerHeight 就可以判断。

但是在 IE7，IE8 中 window.innerHeight 为 underfined，所以为了兼容 IE7、IE8，需要使用document.documentElement.clientHeight 属性计算窗口高度。

计算滚动条宽度的方法

还是以弹窗为例，因为 IE 10 以上以及移动端浏览器的滚动条都是不占据页面宽度的透明样式（其中 IE 10 以上浏览器可以通过 CSS 属性还原原始的滚动条样式），所以为了进一步增强用户体验，我们还需要计算滚动条的宽度，根据情况添加合理的 margin-left 数值。

计算滚动条宽度的方法比较简单，新建一个带有滚动条的 div 元素，通过该元素的 offsetWidth 和 clientWidth 的差值即可获得，我在此借鉴 Magnific-popup 中的方法

function getScrollbarWidth() {

  var scrollDiv = document.createElement("div");
  scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
  document.body.appendChild(scrollDiv);
  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);

  return scrollbarWidth;

}

总结

使用 JS 实现一个功能可能并不困难，但作为编程人员应该时刻思考如何更简单更优雅的实现这个功能，并且时刻以提升用户体验为原则。对于条件判断，也许十行的逻辑判断可能只需要一行，最近感受极为深刻，而且要善于使用三元表达式替代 if..else 来精简代码。

原理就是判断 是文档高度大于可视区域高度。

赞 (0)

相关推荐

  • 通过 JS 判断页面是否有滚动条的实现方法

    前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁.最终通过参考不同方法,写了一个比较简单的方法.在判断滚动条的同时也需要计算滚动条的宽度,通过本篇文章一并与大家分享. 为什么要判断滚动条 判断滚动条的需求在弹窗插件中用的较多,因为弹窗大多会添加 overflow: hidden 的属性,如果页面比较长的话,添加这个属性之后页面会有晃动. 为了增强用户体验,通过判断是否有滚动条而添加 margin-left 属性以抵消 overf

  • JS判断页面是否出现滚动条的方法

    本文实例讲述了JS判断页面是否出现滚动条的方法.分享给大家供大家参考.具体如下: var isScroll = function (el) { // test targets var elems = el ? [el] : [document.documentElement, document.body]; var scrollX = false, scrollY = false; for (var i = 0; i < elems.length; i++) { var o = elems[i]

  • JS实现微信里判断页面是否被分享成功的方法

    本文实例讲述了JS实现微信里判断页面是否被分享成功的方法.分享给大家供大家参考,具体如下: var shareData = { img_url: "", img_width: 200, img_height: 200, link: '', desc: '', title: '', appid: 0 }; document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 发送给好友 WeixinJ

  • 使用JS判断页面是首次被加载还是刷新

    1 利用window.name属性在页面刷新时不会重置判断(在该属性空置的情况下可使用) if(window.name == ""){ console.log("首次被加载"); window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 }else if(window.name == "isReload"){ console.log("页面被刷新&quo

  • 详解JS判断页面是在手机端还是在PC端打开的方法

    详解JS判断页面是在手机端还是在PC端打开的方法

    我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备. 先看看项目的目录: 在index.html里面配置js控制选择那一个文件夹下的文件就可以了. 我们要利用:Navigator 对象,Navigator 对象包含有关浏览器的信息. index.html很简单,直接上码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="vi

  • js实现页面跳转的五种方法推荐

    js实现页面跳转的五种方法推荐 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript&quo

  • JS判断是否手机或pad访问实现方法

    JS判断是否手机或pad访问实现方法 S判断是否手机或pad访问 方面的内容,对于利用JS判断是否手机或pad访问 感兴趣的同学可以看下, 直接上代码: <script type="text/javascript"> /* * 智能机浏览器版本信息: * */ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览

  • 基于JS判断iframe是否加载成功的方法(多种浏览器）

    推荐阅读: JS iFrame加载慢怎么解决 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来.这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面: ie浏览器 IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,

  • JS遍历页面所有对象属性及实现方法

    for...in循环的Javascript示例: <html> <head> <title>一个使用到for...in循环的Javascript示例</title> </head> <body> <script type="text/javascript"> // 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent. var myObject =

  • JS判断iframe是否加载完成的方法

    本文实例讲述了JS判断iframe是否加载完成的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content=&qu

随机推荐