通过 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 相关文章推荐
asm.js使用示例代码
Nov 28 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
简单分析javascript中的函数
Sep 10 Javascript
jQuery操作之效果详解
May 19 jQuery
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
JS 统计时间
2021/03/09 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
python单例模式实例分析
2015/04/08 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
基于matplotlib xticks用法详解
2020/04/16 Python
python为什么要安装到c盘
2020/07/20 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
印度网上药店:1mg
2017/10/13 全球购物
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
大学生职业生涯规划书前言
2014/01/09 职场文书
学校门卫管理制度
2014/01/30 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
接待员岗位职责
2015/02/13 职场文书
解约证明模板
2015/06/19 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
电频谱管理的原则是什么
2022/02/18 无线电
Oracle用户管理及赋权
2022/04/24 Oracle