通过 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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JSON相关知识汇总
Jul 03 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
jQuery入门知识简介
2010/03/04 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
django创建自定义模板处理器的实例详解
2017/08/14 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
中专自我鉴定范文
2013/10/16 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
法学个人求职信范文
2014/01/27 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
领导班子整改措施
2014/10/24 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python