Объекты document, работа с window, screen

Описание

document - это по факту объект который содержит всю html структуру.
window - это окно в котором показывается наш документ. Если мы будем уменьшать браузер или откроем консоль и будем ее вытягивать и тд, то меняться будет именно window
screen - Экран. Это именно видимый монитор. У разных людей будут разные мониторы и поэтому screen будет отличаться.

Элементы и их свойства

У элементов которые мы получаем со страницы, есть свойства для получения разных метрик.

clientHeight и clientWidth

Они нам нужны если мы хотим получить высоту и ширину включая padding, но без border и margin, а scroll отнимает нашу ширину и высоту.

const box = document.querySelector('.block');
const width = box.clientWidth,
      height = box.clientHeight;

console.log(width, height); // 386 336
// в css у меня этот блок 400px на 350px и есть scroll который отнимает 14px.
// если мы например пропишем padding: 5px; , то будет 396 и 346. Но если пропишем border или margin ничего не изменится.

offsetWidth и offsetHeigth

Получаем видимую часть, с учетом прокрутки и тд. Как написано в css

const box = document.querySelector('.block');
const width = box.offsetWidth;
const height = box.offsetHeight;

console.log(width, height); // 404 354. У меня border 2px поэтому на 4px больше с каждой стороны. Scroll при этом уже не отнимает px так как он учитывается.

scrollWidth, scrollHeight, scrollTop

Получаем ширину и высоту полностью, то есть внутренний элемент который нужно проскроллить. А scrollTop - показывает сколько скрыто вне скролла ( с помощью этой штуки можно сделать шкалу сколько пользователь уже пролистал что то).

У меня такой блок шириной 400px и высотой 350px. Так вот scrollWidth и scrollHeight показывают именно то, что внутри.

const btn = document.querySelector('.btnscroll');
const box = document.querySelector('.block')
const width = box.scrollWidth;
const height = box.scrollHeight;

console.log(height, width); // 537 и 386. 537 - это внутри блока, высота увеличилась из за текста внутри. 386 ширина, 14px забрал scroll

btn.addEventListener('click', () => { // вешаем событие на кнопку
    box.style.height = box.scrollHeight + 'px'; // и изменяем высоту блока при нажатии. немного раскрываем так сказать.


    console.log(box.scrollTop); // А тут после нажатия будет показывать сколько пикселей вверху осталось вне нашего поля зрения(сколько мы проскролили) 

});

pageXOffset, pageYOffset

Эти свойства показывают сколько прокручено у окна window. Как и scrollTop только это все окно.

function showModalByScroll() {
    if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
        console.log('ПРИВЕТ ДУРАК');
        // window.pageYOffset - это свойство показывает сколько прокрученно у всего окна
        // document.documentElement.clientHeight - а здесь видимая часть всего html
        // document.documentElement - мы так получили по сути элемент html
        // здесь мы их складываем и сравниваем scrollHeight.  то есть если прокрученная часть окна и видимая совпадают с scrollHeight у всего html, значит мы прокрутили страницу до самого конца.
        window.removeEventListener('scroll', showModalByScroll); // удаляем обработчик
    }
}
window.addEventListener('scroll', showModalByScroll); // вешаем событие scroll На окно и передаем нашу функцию