Я создал сайт, используя фиксированное позиционирование HTML и манипулирование z-индексами, чтобы получить нужные эффекты без какого-либо javascript.Страница отлично работает на Chrome, но на Firefox у меня возникла странная проблема.
Вот MVCE:
<html style="height:100%;overflow-x:hidden">
<head></head>
<body style="padding:0;margin:0;height:100%;overflow-x:hidden">
<div style="height:100%;width:100%;background-color:#555"></div>
<div style="height:200px;width:100%;position:fixed;bottom:10%;background-color:#fff"></div>
<div style="height:1000px;width:100%;position:relative;background-color:#aaa"></div>
</body>
</html>
Я изначально столкнулся с ним при разработке этой страницы: https://rgiant.com/
Шаги для воспроизведения: в Firefox откройте страницу, затем начните поворачивать колесо прокрутки вверх и вниз, перемещая мышь по экрану.Когда вы наводите курсор мыши на нижнюю ленту, она останавливает прокрутку и препятствует дальнейшей прокрутке.Поведение MVCE не совсем то же самое, что и оригинальная веб-страница, но оно достаточно похоже.Разница заключается в том, что на оригинальной веб-странице после того, как свиток застрянет, независимо от того, куда вы двигаете мышью на странице, свиток никогда не отклеивается.На MVCE вы можете переместить вашу мышь с нижней ленты, и она снова начнет нормально прокручиваться.
Я заметил, что удаление overflow-x: hidden влияет на него, но у меня есть этот стиль дляпричина, я забыл, но я думаю, что это связано с изменением размера мобильного изображения.