Question

我有这个jQuery代码。如何使用纯JavaScript来做同样的事情？我想检测滚动条是否可见。

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

});

我曾经尝试过这种方法，但没有成功

if(document.body.height > window.height){
  alert("Vertical Scrollbar! D:");
}

Answer 1

您可以使用：

if(document.body.scrollHeight > window.innerHeight){
  alert("Vertical Scrollbar! D:");
}

请参见示例：

if(document.body.scrollHeight > window.innerHeight){
  alert("Vertical Scrollbar! D:");
}

<div style="height:1000px"></div>

相关：How to get height of entire document with JavaScript?和how to get exact height of body of the webbrowser window?。

Answer 2

您可以在body标签中插入div标签并设置div高度并自动溢出。请参见下面的示例代码。

<body>
   <div id="innerscroll" style="width: 100px; height:100px; overflow:auto;">* content</div>
</body>

添加脚本：

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("#innerscroll").get(0).scrollHeight > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }
});

有效。

Answer 3

您可以使用：

if(document.body.scrollHeight > window.height){
  alert("Vertical Scrollbar! D:");
}

检测垂直滚动是否可见

3 个答案: