html判断是否有滚动条,如何判断有没有出现滚动条

最新推荐文章于 2022-11-28 10:43:43 发布

爱牛仕

最新推荐文章于 2022-11-28 10:43:43 发布

阅读量2k

点赞数

文章标签： html判断是否有滚动条

API

说明

clientWidth

内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。

Element.clientWidth 属性表示元素的内部宽度，以像素计。

该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话)。

offsetWidth

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。

一个典型的(译者注：各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。

scrollWidth

Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。

scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。

宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条(如果存在)。它还可以包括伪元素的宽度，例如::before或::after。如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth

clientHeight

这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

offsetHeight

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话)，不包含:before或:after等伪类元素的高度。

scrollHeight

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scrollHeight的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

此属性会将获取的值四舍五入取整数。如果你需要小数结果, 请使用 element.getBoundingClientRect().

7cdbfb7c9ebc

image.png

水平方向滚动条

我们要判断一个div上有没有出现水平方向滚动条，只需判断scrollWidth是否大于clientWidth即可。

当border为0时，使用offsetHeight - clientHeight可以得到水平滚动条的宽度(如果有的话)。

垂直方向滚动条

我们要判断一个div上有没有出现垂直方向滚动条，只需判断scrollHeight是否大于clientHeight即可。

当border为0时，使用offsetWidth - clientWidth可以得到垂直滚动条的宽度(如果有的话)。

但是在IE浏览器上，某些特殊情况下，虽然scrollHeight > clientHeight(或scrollWidth > clientWidth)，也不一定出现滚动条。

API

父元素

子元素

Element.clientHeight

257

258

Element.offsetHeight

257

258

Element.scrollHeight

258

Element.getBoundingClientRect().height

257

257.92999267578125

Element.clientWidth

840

Element.offsetWidth

840

我们发现，在这种特殊情况下，虽然父元素的 scrollHeight(258)> clientHeight(257)，并且实际内容的高度是257.92999267578125，的确父元素应该出现滚动条，但实际在IE浏览器上没有显示滚动条，这一点我们从数据父元素的 offsetWidth(840)- clientWidth(840)= 0 也可得出。

通常情况下，我们可以使用scrollWidth > clientWidth 判断是否出现水平滚动条， scrollHeight > clientHeight 判断是否出现垂直滚动条。

在需要更精确(非移动端且非overflow: hidden 或 overlay)或要拿到滚动条宽度的情况下，我们可以使用 offsetHeight - clientHeight(水平滚动条) 或 offsetWidth - clientWidth(垂直滚动条)，这时，我们不要忘了减去元素的border。

更复杂情况下的判断

有时候情况比较复杂，比如滚动区域宽度是不固定的，我们需要根据是否出现滚动条来设置滚动区域宽度(比如，出现滚动条时给左右加上点击按钮，来切换显示区域)。这时我们就需要来计算内部各元素宽度之和来判断是否出现滚动条。

这里写了个例子，我们来看一下，运行环境为Windows电脑，Chrome浏览器

API

父元素

子元素1

子元素2

Element.getBoundingClientRect().width

341.375

98.40625

240.96875

getComputedStyle(Element).width