Question

我正在创建一个移动网页，它是移动屏幕的高度，但水平滚动浏览其内容。

我遇到的问题是具有固定位置的div只会水平滚动直到达到视口宽度（我已经在启用了设备模式且选择了iPhone 6的情况下测试了chrome，其视口宽度为375px，而我的身体元素的宽度为1875像素。）

以下代码显示了我的问题的简化版本：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=1875, height=device-height, initial-scale=1">
        <style>
            body{
                width: 1875px;
                margin: 0px;
            }
            div{
                width: 200px;
                position: fixed;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div>
            <p>This is the test paragraph</p>
        </div>
    </body>
</html>

我发现了类似的问题，但大多数人都在问如何阻止固定的div水平滚动，而我希望固定的div能够滚动整个body元素的宽度，而不会停留在视口宽度。

如果没有像Chrome开发工具那样的设备模拟，我会提出一个小提琴，但是我不能复制这个问题。

视口宽度阻止固定div水平滚动

0 个答案: