Проверить наличие скролла

R
На сайте с 01.12.2012
Offline
86
664

Всем привет.

Необходимо определить наличие вертикального скролла. Сделал так, пример ниже. Всё отлично работает. Но дело в том, что данный вариант определяет наличие скролла только после перезагрузки. Необходимо, чтобы скрипт отслеживал наличие скролла постоянно. Например, если при повороте телефона появится скролл, то необходимо чтобы сразу добавился класс к body. Или же если вручную меняя высоту браузера.

                let mainHeight = document.documentElement.clientHeight;
                let scrolHeight = Math.max(
                        document.body.scrollHeight, document.documentElement.scrollHeight,
                        document.body.offsetHeight, document.documentElement.offsetHeight,
                        document.body.clientHeight, document.documentElement.clientHeight
                );
                if (scrolHeight > mainHeight) {
                        document.body.classList.toggle('scroll');
                }

Прошу подсказки, как это можно сделать. Можно на jquery.

Заранее всем признателен за подсказку.

D
На сайте с 07.11.2000
Offline
228
#1
Просто повесить функцию на обработчик события  resize:
window.addEventListener("resize", function(){alert("resize")});
D
На сайте с 07.11.2000
Offline
228
#2
Т.е. вместо  function(){alert("resize")} - Ваша функция
R
На сайте с 01.12.2012
Offline
86
#3

Данный вариант работает не так, как надо. При изменении размера класс постоянно добавляется и убирается независимо от того, есть скроллинг или нет. Пример в видео.


Может я что-то не так сделал?

                window.addEventListener("resize", function () {
                        let mainHeight = document.documentElement.clientHeight;
                        let scrolHeight = Math.max(
                                document.body.scrollHeight, document.documentElement.scrollHeight,
                                document.body.offsetHeight, document.documentElement.offsetHeight,
                                document.body.clientHeight, document.documentElement.clientHeight
                        );
                        if (scrolHeight > mainHeight) {
                                document.body.classList.toggle('scroll');
                        }
                });
lutskboy
На сайте с 22.11.2013
Offline
184
#4
$(function(){
        setInterval(function(){
                var eh = $('html')[0].scrollHeight;
                var wh = $(window).height();
                if (eh>wh) {
                        $('body').addClass('scroll')
                } else {
                        $('body').removeClass('scroll')
                }
        },10);
});
R
На сайте с 01.12.2012
Offline
86
#5

Всё работает как надо. Спасибо большое. Очень помогли)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий