Как узнать, что высота экрана устройства пользователя меньше, чем высота содержимого страницы? - PullRequest
Новая
       0

Как узнать, что высота экрана устройства пользователя меньше, чем высота содержимого страницы?

1 голос
/ 18 апреля 2020

Я создаю веб-приложение в PHP и хочу поместить элемент «В начало» в нижний колонтитул, только если пользователю нужно прокрутить страницу, в противном случае он не будет отображаться. Как я могу убедиться, что высота экрана браузера пользователя слишком мала для отображения тега <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>

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

На основании ответа Ахмеда. Решение: 

window.addEventListener("DOMContentLoaded", () => {
    let contentHeight = document.getElementsByTagName("body")[0].clientHeight;
    let contentRelativeHeight = contentHeight / window.innerHeight;

    if (contentRelativeHeight <= 1) {
        document.getElementById("to-top-btn").style.display = "none";
    }
});
1 голос
/ 18 апреля 2020

Вам необходимо вычислить высоту содержимого относительно высоты окна следующим образом: 

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"
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...