JS判断页面是否有滚动条的实现方法

前言

最近在编写插件的过程中，需要用JS来判断是否有滚动条。搜索后，一般的方法都差不多，但是都比较啰嗦，代码不够简洁。最后，通过引用不同的方法编写了一个简单的方法。在判断滚动条时，我们还需要计算滚动条的宽度，我们将通过本文与大家分享。

为什么要判断滚动条

判断滚动条的要求在弹出插件中被广泛使用，因为大多数弹出窗口都会添加overflow:隐藏的属性。如果页面很长，添加该属性后页面会抖动。

为了增强用户体验，通过判断是否有滚动条来抵消隐藏overflow:后面的滚动条位置，增加了左边距属性。

判断是否有滚动条的方法

实际上只需要一行JS，测试与IE7兼容

函数hasscroll bar(){ return document . body . scroll height(window . inner height | | document . document element . client height)；}一般可以用document . body . scrollheightwool . inner height来判断。

但是在IE7和IE8中，window.innerHeight是欠着色的，所以为了兼容IE7和IE8，就需要使用属性文档。documentelement。clientheight计算窗口高度。

滚动条宽度的计算方法

以弹出窗口为例，由于IE 10以上的浏览器和移动终端的滚动条都是不占用页面宽度的透明样式(IE 10以上的浏览器可以通过CSS属性恢复原来的滚动条样式)，所以为了进一步提升用户体验，我们还需要计算滚动条的宽度，并根据情况添加合理的左边距值。

滚动条宽度的计算方法比较简单。用滚动条创建一个新的div元素，可以通过这个元素的offsetWidth和clientWidth之间的差来获得。我将在这里学习放大镜弹出的方法

函数getScrollbarWidth(){ var scroll div=document . createelement(' div ')；scroll div . style . CSS text=' width : 99px；高度： 99px；飞越：卷轴；绝对位置：' top :-9999 px；'；document . body . appendchild(scroll div)；var scroll bar width=scroll div . offsetwidth-scroll div . client width；document . body . remove child(scrollDiv)；返回scrollbarWidth}摘要

用JS实现一个功能可能并不难，但作为一个程序员，要时刻思考如何更简单优雅地实现这个功能，始终以提升用户体验为原则。对于条件判断来说，可能十行逻辑判断只需要一行，最近已经深深感受到了，要善于用三元表达式代替if.否则简化代码。

原理是判断文档高度大于可视区域高度。