Рефрешит страницу при скролле на телефоне

Рейтинг: 1Ответов: 1Опубликовано: 10.07.2023

Проблема следующего характера: Сайт написан на html, js vanilla, css, gsap. При скролле на мобильном устройстве почему-то рефрешит iframe, мигает много раз. Ребят, кто сталкивался, из-за чего это может происходить? Мыслей вообще нет на этот счёт. Использовал scrollTrigger.refresh() только одиножды и то на другой странице при нажатии на кнопки, которых на этой странице нет. Есть видео, только хз, как сюда его прикрепить

Обновление информации, я выяснил, что контент рефрешится при скролле вверх/вниз из-за табов, в которых находится контент. Продолжаю искать корень бажины.

css javascript html прокрутка gsap
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Ребят, я решил задачку, вообщем, проблема заключалась просто в необдуманных строчках кода на этапе проектирования логики.

window.addEventListener('resize', evt => {
             const resizeWidth = evt.currentTarget.innerWidth
             if (resizeWidth < 600) restructionDetail(on)
             if (resizeWidth > 600) restructionDetail(off)
        })
        ;(function () {
            if (window.innerWidth <= 600) restructionDetail(on)
        })()
    }

Вообщем, у меня вёрстка выстроена таким образом, что контент разложен в 3 таба, если ширина экрана меньше 600px, то она джаваскриптом переносит контент из табов в другое место на странице, для более удобного отображения контента.

В коде, который я прикрепил, стоит слушатель событий на window, слушает изменения размера экрана. В моём случае было бы достаточно нижней iife, которая вызывает функцию реконструкции страницы, но почему-то в мой больной мозг пришла мысль написать ещё один этап проверки, но из-за того, что на мобилке первая проверка (if (resizeWidth < 600) restructionDetail(on)) всегда возвращает тру, то при изменении разрешения хотя бы на 1px, срабатывает повторная реконструкция и рефреш iframe вместе с остальным контентом. Вот и всё). Решил проблему просто удалив первые два if.