Было несколько вопросов , подобных этому , по поводу inte rnet для работы с горизонтальными полосами прокрутки. Я читал много из них, и люди объясняют, как это исправить, но я не могу найти ответа на , почему это вообще происходит.
SP c говорит следующее о значении переполнения hidden:
Это значение указывает, что содержимое блока отсекается до его поля заполнения и что UA не должен предоставляют любой пользовательский интерфейс с прокруткой для просмотра содержимого за пределами области отсечения, и не позволяют прокручивать при прямом вмешательстве пользователя, таком как перетаскивание на сенсорном экране или использование колеса прокрутки мыши. Тем не менее, содержимое должно быть прокручено программно, например, с использованием механизмов, определенных в [CSSOM-VIEW], и поэтому поле все еще является контейнером прокрутки.
Я сделал эту очень простую страницу который намеренно имеет переполненное содержимое и overflow-x: hidden на <body>:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="overflow-x: hidden">
<div style="width: 150%">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus magna odio, vel eleifend nulla
ullamcorper eget. Nulla vel mi facilisis, facilisis mi non, lacinia libero. Cras eros orci, tristique id
orci et, finibus convallis libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Quisque vehicula mauris at ex placerat fermentum sed eget erat. Nulla eleifend sodales
dolor, ac luctus eros malesuada et. Sed ut lobortis eros. Vestibulum eget tortor nibh. Mauris vulputate
sapien id faucibus molestie. Proin commodo efficitur purus, vitae auctor libero luctus eu. Donec nec ipsum
libero. Duis tincidunt dapibus ex, vel facilisis sapien interdum id.</p>
<p>Nunc faucibus, velit at aliquet condimentum, felis urna tristique sapien, sed volutpat nibh turpis nec dolor.
Sed feugiat at justo eget auctor. Cras pellentesque dapibus orci non egestas. Nulla pulvinar rhoncus nulla
vel tempus. Sed id ultrices nisi. Cras sit amet augue eget tellus convallis condimentum a non massa. Ut a
justo in felis interdum tempus vitae vitae orci. Praesent efficitur mi dui, quis porttitor tellus
pellentesque suscipit. In posuere volutpat scelerisque. Donec semper sapien at elit egestas, sit amet
fringilla risus ultricies. Maecenas congue posuere velit, eu tristique metus cursus quis. In urna lorem,
mollis non quam ac, consectetur laoreet ante.</p>
<p>Pellentesque nec sem pellentesque, interdum dui id, pretium ipsum. Aenean at augue placerat, rutrum mauris
quis, vehicula nibh. Vestibulum at augue mi. Sed laoreet enim et augue dapibus vestibulum. Curabitur
pellentesque dignissim ante quis elementum. Phasellus pretium tortor molestie libero tincidunt eleifend vel
sed mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eu finibus dui, non mattis
sapien. Pellentesque at tortor lacus. Donec enim nulla, lacinia a risus id, congue sollicitudin dolor. Fusce
non imperdiet magna. Nunc vehicula scelerisque aliquet. Mauris pellentesque quis enim vitae finibus.</p>
<p>Nulla facilisi. Maecenas vitae ipsum quam. Cras eleifend facilisis dolor vel blandit. Praesent commodo ex
arcu, id varius felis condimentum et. Nulla lobortis, augue ut ultricies tincidunt, dolor dui tristique
libero, nec lacinia tellus nunc ut risus. Phasellus et egestas arcu. Vestibulum lobortis vel erat sit amet
fringilla. Proin fringilla urna libero, eget cursus sem laoreet sed. Nunc vitae mauris et elit mollis
volutpat eu eget velit. Mauris fringilla viverra ex, nec ornare arcu consequat id. Cras sed erat elit.
Mauris euismod, sapien eu iaculis finibus, massa risus convallis eros, sit amet lacinia lacus velit
elementum arcu. Etiam ut lacus convallis, euismod enim eu, bibendum libero.</p>
<p>Maecenas auctor sapien auctor lobortis auctor. Praesent vel lacus dictum, rutrum dui vitae, vehicula arcu.
Aenean sapien ante, dignissim ut lacinia quis, interdum faucibus lacus. Mauris facilisis dolor non orci
interdum, eget suscipit orci cursus. Quisque a eros quam. Etiam tempor nisi vel iaculis luctus. Fusce sit
amet pellentesque erat. In lorem mi, mattis ut maximus semper, efficitur eget eros. Suspendisse ac nulla
tincidunt enim tincidunt convallis sit amet ac nisl. In eu magna libero. Aliquam erat volutpat. In egestas
sit amet mauris a rhoncus. Aliquam aliquet mauris nec venenatis dignissim. Aenean faucibus tortor vitae
lacus malesuada, id fringilla nunc tincidunt.</p>
</div>
</body>
</html>
... и на рабочем столе горизонтальная полоса прокрутки правильно скрыта:
Однако на мобильном устройстве вы можете прокручивать контент:
Вы даже получаете полосу прокрутки в DevTools при просмотре страницы в «Мобильном» режиме. :
Вопрос: почему ? У меня есть мета-тег области просмотра на странице:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
... который является намеком на то, что страница удобна для мобильных устройств. Поэтому если у меня есть overflow-x: hidden, , я имею в виду . Почему браузер не учитывает это?
Я знаю, что могу обойти это, например, заключив всю страницу в элемент <div> и установив вместо него overflow-x: hidden. Но если у меня где-то в содержимом есть элемент position: sticky, он больше не будет работать, потому что он привязан к своему контейнеру прокрутки, который является элементом оболочки, и фактическая прокрутка происходит в теле. Или, если я также установлю overflow-y: auto в оболочке, липкий элемент будет работать, как ожидалось, но теперь все JavaScript сломаются, потому что он использует document.scrollingElement, а фактический элемент прокрутки - это эта оболочка.
Так что обойти это может быть сложно, и я не понимаю, зачем нам эти хаки. Мне кажется, что браузеры не могут правильно реализовать spe c.