scrollHeight不仅仅是clientHeight,即使没有滚动内容也是如此

时间:2015-06-04 11:13:34

标签: javascript css

我有一段JS代码,用于确定是否存在垂直滚动条并将CSS类应用于元素。没什么大不了的。 令我感到困惑的是它似乎与我理解应该做的相反。这不是一个问题,除非它是一个错误,并在将来修复 代码:

if (document.body.scrollHeight > document.body.clientHeight) {
    var d = document.getElementById("footer").className = "footernoscroll";
}

我的理解是,如果有垂直滚动条,它将应用该类,但如果不是滚动条,它似乎应用该类。我是否正确地解释了这个并且代码行为奇怪或者我的解释错了?

编辑:我想我应该补充一下,如果我反转操作符,效果将被反转,它将使用语句的else部分。

2 个答案:

答案 0 :(得分:3)

确保您的身体是窗户高度的100%。如果你没有这个,那么clientHeight值将是body中项目的组合高度,而不是整个窗口高度,而scrollHeight 是窗户的整个高度。

这是一个显示它正常工作的小提琴(开放开发工具和视图控制台):http://jsfiddle.net/alexcoady/c53d7q27/1/

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

clientHeight documentation
scrollHeight documentation

答案 1 :(得分:0)

  

scrollHeight值等于元素所需的最小clientHeight,以便在不使用垂直滚动条的情况下拟合视点中的所有内容。

从这里采取:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

因此,如果没有滚动条,则表示值相同;如果有滚动条,则scrollHeight更大。