通过 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 得到变量类型的函数
May 19 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
JAVA面试题 static关键字详解
Jul 16 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
图书管理程序(一)
2006/10/09 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
python处理按钮消息的实例详解
2017/07/11 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
巧克力蛋糕店创业计划书
2014/01/14 职场文书
公司接待方案
2014/03/08 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
离婚协议书范文2015
2015/01/26 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
hive数据仓库新增字段方法
2022/06/25 数据库