Советы по прокрутке в браузере

Это простые, но важные советы по работе с поведением прокрутки на современных веб-страницах.

1. Как правильно отключить прокрутку для модального окна

Короче говоря, я обнаружил, что лучший способ заморозить прокрутку — это не через событие onScroll, а через переполнение: скрытый и прокрутка вручную до нужного места. Это полезно с модальными окнами и т.п.

Например, в модальном окне в событии, вызванном кнопкой, открывающей модальное окно:

function onModalOpen(event){ 
   
   document.body.style.overflow="hidden"; 
   window.frozenScrollCoords = {
                             x: window.pageXOffset,
                             y: window.pageYOffset
                               }; 
}

Затем, когда модальное окно закрывается, событие должно снова сделать страницу прокручиваемой и убедиться, что координаты прокрутки такие же, какими они были до запуска модального окна:

function onModalClose(event){ 
     document.body.style.overflow="scroll";
     window.scrollTo(window.frozenScrollCoords.x,          window.frozenScrollCoords.y); 
window.frozenScrollCoords = {x:0, y:0}; 
}

2. Плавное изменение стиля на панели навигации при прокрутке одностраничного веб-сайта.

Я также обнаружил, что лучший способ справиться с триггерами стилей CSS для событий прокрутки — сделать их разными значениями для включения и выключения, чтобы избежать такого уродливого дрожащего поведения:

Это касается любого модного стиля навигационной панели, особенно на одностраничных сайтах.

Сначала мы добавляем прослушиватель событий для прокрутки:

document.addEventListener('scroll', debounce(storeScroll), { passive: true });

Затем мы активируем атрибут данных, используемый для стилизации нашей панели навигации в зависимости от того, находимся ли мы в верхней части страницы или нет:

const storeScroll = () => { 
    
     const header = document.getElementsByTagName("header")[0]; 
    
     if(window.scrollY > header.offsetHeight/2.0) 
     { 
       header.setAttribute("data-isTop", false); 
     } else if (window.scrollY < 10) 
     { 
       header.setAttribute("data-isTop", true); 
     } 
};

Обратите внимание, как атрибут данных включается и выключается на основе двух разных значений: это действительно важно, иначе вы застрянете между двумя стилями.

Теперь работает корректно:

Первоначально опубликовано на https://aglaiafeli.dev 19 июня 2020 г.