通过 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的滚动新闻列表
Jun 19 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
微信小程序实现日历效果
Dec 28 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
vue各种事件监听实例(小结)
Jun 24 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php 保留小数点
2009/04/21 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP实现倒计时功能
2020/11/16 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
平面设计师工作职责范文
2013/12/03 职场文书
一份创业计划书范文
2014/02/08 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
公司董事长岗位职责
2014/06/08 职场文书
银行金融服务方案
2014/06/11 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python