通过JS判断页⾯是否有滚动条的简单⽅法
前⾔
最近在写插件的过程中，需要使⽤ 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属性计算窗⼝⾼度。
计算滚动条宽度的⽅法js控制滚动条
还是以弹窗为例，因为 IE 10 以上以及移动端浏览器的滚动条都是不占据页⾯宽度的透明样式（其中 IE 10 以上浏览器可以通过 CSS 属性还原原始的滚动条样式），所以为了进⼀步增强⽤户体验，我们还需要计算滚动条的宽度，根据情况添加合理的margin-left数值。
计算滚动条宽度的⽅法⽐较简单，新建⼀个带有滚动条的div元素，通过该元素的offsetWidth和clientWidth的差值即可获得，我在此借鉴 Magnific-popup 中的⽅法
function getScrollbarWidth() {
var scrollDiv = ateElement("div");
scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
document.body.appendChild(scrollDiv);
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
veChild(scrollDiv);
return scrollbarWidth;
}
总结
使⽤ JS 实现⼀个功能可能并不困难，但作为编程⼈员应该时刻思考如何更简单更优雅的实现这个功能，并且时刻以提升⽤户体验为原则。对于条件判断，也许⼗⾏的逻辑判断可能只需要⼀⾏，最近感受极为深刻，⽽且要善于使⽤三元表达式替代if..else来精简代码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。