Question

互联网上有许多关于水平滚动条的问题like this one。我已经阅读了很多文章，并且人们解释了如何解决此问题，但我找不到关于为什么首先发生的答案。

关于hidden溢出值的规范says如下：

此值表示该框的内容被剪切到其填充框，并且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 viewport标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

...这暗示该页面适合移动设备。因此，如果我有overflow-x: hidden，我是说。浏览器为什么不尊重它？

我知道我可以通过将整个页面包装在<div>元素中，并在其上设置overflow-x: hidden来解决此问题。但是，如果我在内容中的某个位置有一个position: sticky元素，它将不再起作用，因为它会粘贴到其滚动容器（即包装器元素）上，并且实际滚动发生在主体上。或者，如果我还在包装器上设置了overflow-y: auto，sticky元素将按预期工作，但是现在所有JavaScript都将中断，因为它使用了document.scrollingElement，而实际的滚动元素就是这个包装器。

所以解决这个问题可能很棘手，而且我不明白为什么我们需要这些技巧。在我看来，浏览器似乎无法正确实施规范。

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以上述方式在HTML文档上设置ViewPort时，initial-scale=1.0设置浏览器首次加载页面时的初始缩放级别。

鉴于将缩放级别应用于页面，而该特定div没有溢出，则html和body是因为您将div的宽度设置为{{1 }}。

该ViewPort比例尺实际上正在改变参考点，而不是针对此特定情况的行为。

您还设置了150%属性，该属性将页面宽度分配为跟随设备的width=device-width（将随设备而定），该宽度用作“缩放元素”的另一个参考点'（页面布局）。

溢出无法按预期进行的原因是，它正确地应用于了div，因此，除了现在调整大小的screen-width / {{1}之外，内容均按预期方式运行}已从参考大小扩展到html和body，以便它们随后会覆盖ViewPort。

要解决此问题，您可以将device-width标签修改为：

scale

这可以解决此问题，因为<meta>决定了您可以缩放的距离，这可以防止<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">关于预期结果的“干扰”，因为缩放的“页面尺寸”现已锁定视您在物理上看到的视口大小而定，并以适当的比例缩放，无论初始设置为什么。

为什么不溢出-x：在移动设备上隐藏隐藏的滚动条？

1 个答案: