前言

最近在写插件的过程中,需要使用 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.innerHeightunderfined,所以为了兼容 IE7、IE8,需要使用 document.documentElement.clientHeight 属性计算窗口高度。

计算滚动条宽度的方法

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

计算滚动条宽度的方法比较简单,新建一个带有滚动条的 div 元素,通过该元素的 offsetWidthclientWidth 的差值即可获得,我在此借鉴 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 来精简代码。

通过 JS 判断页面是否有滚动条的简单方法的更多相关文章

  1. JS判断页面是否出现滚动条

    今天无聊,帮一个网友解决一个很无聊的问题,用JS判断页面是否出现滚动条,在网上看了一些代码,经过验证并不起作用,下面是在网上搜索到的代码: 当可视区域小于页面的实际高度时,判定为出现滚动条,即: if ...

  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 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...

  5. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  6. [转]PHP实现页面静态化的超简单方法

    为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态 ...

  7. js判断页面放大缩小

    项目中,经常会碰到页面被放大或者缩小,导致页面显示错误,js可以判断页面放大缩小. // 若返回100则为默认无缩放,如果大于100则是放大,否则缩小 function detectZoom (){ ...

  8. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  9. 用js判断页面刷新或关闭的方法

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...

随机推荐

  1. KMP - LeetCode #459 Repeated Substring Pattern

    复习一下KMP算法 KMP的主要思想是利用字符串自身的前缀后缀的对称性,来构建next数组,从而实现用接近O(N)的时间复杂度完成字符串的匹配 对于一个字符串str,next[j] = k 表示满足s ...

  2. P2757 导弹的召唤(数据加强)

    传送门 LIS的O(nlgn)模板题.加强"导弹拦截" #include <cstdio> #include <cstring> #include < ...

  3. 边框(Border) 和 轮廓(Outline) 属性

    border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...

  4. react入门到进阶(三)

    一.react样式 1.内联样式 在以前写html+css的时候,引入css的时候有一种方法就是内联,而在react中又有些不一样,样式是用变量的形式,如下 const styleComponentH ...

  5. 最短路洛谷P2384

    题目背景 狗哥做烂了最短路,突然机智的考了Bosh一道,没想到把Bosh考住了...你能帮Bosh解决吗? 他会给你100000000000000000000000000000000000%10金币w ...

  6. 超简单的php缓存类

    <?php class Cache { private $dir = "data/cache/";//定义缓存目录 private $key='c_a_sss'; // 文件 ...

  7. How to support comparators in our sort implementations?

    上图是普林斯顿算法课part1.Mergesort章节给出的参考代码,可以发现这个代码有三处警告.造成的隐患就是我们无法在类型检查时发现送入sort()函数的数组元素类型和Comparator的泛型不 ...

  8. 大数据学习系列之五 ----- Hive整合HBase图文详解

    引言 在上一篇 大数据学习系列之四 ----- Hadoop+Hive环境搭建图文详解(单机) 和之前的大数据学习系列之二 ----- HBase环境搭建(单机) 中成功搭建了Hive和HBase的环 ...

  9. ps的快捷键

    最近学习了一些ps切图,总结一些快捷键,以免自己忘记,总结的不好,也可能不全,忘大牛指点,试着坚持总结 1.工具箱 (多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取) 矩形.椭圆选框工具 ...

  10. 动手开发一个名为“微天气”的微信小程序(上)

    引言:在智能手机软件的装机量中,天气预报类的APP排在比較靠前的位置.说明用户对天气的关注度非常高.由于人们不管是工作还是度假旅游等各种活动都须要依据自然天气来安排.跟着本文开发一个"微天气 ...