Question

有没有办法使用javascript来检测html内容是否不适合屏幕（可滚动）以仅在必要时显示“返回顶部按钮”？

Answer 1

很难说，但也许您可以使用document.getElementById()获取元素，然后使用innerHeight（http://www.w3schools.com/jsref/prop_win_innerheight.asp）来确定元素是否超出了高度。

编辑 - 似乎我可能有点误读。如果您想检查页面上的整个HTML内容，可以在scrollHeight上使用document（https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight）之类的内容。

Answer 2

如果您乐意使用jQuery，可以尝试查找窗口高度并将其与包装元素高度进行比较。如果元素高度更大，请显示按钮。

var x = $(window).height();
if ($('#test').height() > x) {
  alert('scrollable');
  //add in button here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" style="height:2000px;background:silver"></div>

Answer 3

您可以将页面高度与浏览器的高度进行比较：

document.body.offsetHeight < screen.availHeight

如果页面适合，那将返回true。虽然为了您的目的，为什么不在用户完全向下滚动时显示按钮？假设你可以使用jQuery，

$(window).scroll(function(){
    if ($(document.body).scrollTop() > 0)
    {
        //Add or show button here
    }
})

Answer 4

它不支持IE，但我的fave vanilla javascript始终是：

var scrollHeight = window.scrollY;
console.log(scrollHeight);

Javascript检测html元素是否适合屏幕

4 个答案: