时间戳

首页 > 解决方案 > 如何发现用户设备屏幕的高度小于页面内容的高度？

javascript - 如何发现用户设备屏幕的高度小于页面内容的高度？

问题描述

我正在用 PHP 制作一个 Web 应用程序，并且仅当用户需要滚动页面时才想在页脚中放置“返回顶部”元素，否则将不会显示。如何验证用户浏览器屏幕的高度太小而无法在<body>没有框架的情况下显示标签？

现在页脚看起来像：

    <footer class="container pt-4 my-md-5 pt-md-5 border-top">
    <p class="float-right"><a href="#">Back to top</a></p>
    <p>© 2020 · <a href="#" target="_blank">Telegram</a> · <a href="#" target="_blank">GitHub</a></p>
    </footer>

标签： javascripthtmlcss

解决方案

您需要像这样计算相对于窗口高度的内容高度

var contentHeight=document.getElementById("content-id").clientHeight

var contentRelativeHeight= contentHieght / window.innerHeight

然后检查它是否小于或等于 1（这意味着内容高度小于或等于设备屏幕高度）隐藏回到顶部按钮。

<p id="goTopBtn" class="float-right"><a href="#">Back to top</a></p>

if(contentRelativeHeight <= 1){
   document.getElementById("goTopBtn").style.display="none"
}

推荐阅读