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


Posted in Javascript onApril 05, 2018

前言

最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些??拢??氩还患蚪唷W钪胀ü?慰疾煌?椒ǎ?戳艘桓霰冉霞虻サ姆椒āT谂卸瞎龆?醯耐?币残枰?扑愎龆?醯目矶龋?ü?酒?恼乱徊⒂氪蠹曳窒怼?/p>

为什么要判断滚动条

通过 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 数值。

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

计算滚动条宽度的方法比较简单,新建一个带有滚动条的 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 来精简代码。

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

Javascript 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
mint-ui在vue中的使用示例
Apr 05 #Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 #Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 #Javascript
express默认日志组件morgan的方法
Apr 05 #Javascript
React Native悬浮按钮组件的示例代码
Apr 05 #Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 #Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 #Javascript
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python中for in的用法详解
2020/04/17 Python
python实现五子棋程序
2020/04/24 Python
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
市级优秀班主任事迹材料
2014/05/13 职场文书
临床医学专业求职信
2014/08/08 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python