CSS：水平粘贴元素仅适用于桌面，不适用于移动设备

Question

尝试制作一个具有标题的布局，它可以像平常一样垂直滚动到页面之外。但是，如果使用 HTML 滚动条（重要的是它是 HTML 滚动条，因此不必寻找水平滚动条，HTML 滚动条始终显示在视口的底部），标题水平固定。这是一种内容比视口宽的布局，但人们希望标题始终水平显示，但允许其垂直滚动到屏幕外以获得屏幕空间。

当向右滚动时，标题旁边通常是一个空白的空间，我希望标题保持水平粘性（但正如前面提到的垂直滚动）。

在这里您可以看到，当我在桌面上水平滚动时，金色标题停留在该位置并填充整个宽度。

但是一旦你切换到移动设备，它就不再起作用，当我水平滚动时，你可以看到这里的白色间隙，而不是标题仍然卡在原处：

此代码片段不会切换到移动视图，因此如果您想查看移动设备中发生了什么，您必须将其复制并粘贴到文件中并亲自尝试：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- For mobile device scaling -->
<style>
    * {
        box-sizing: border-box;
    }
    html {
        overflow-y: scroll;
        width: max-content;
    }
    body {
        margin: 0;
    }
    header {
        background: goldenrod;
        border-right: 1px solid red;
        position: sticky;
        left: 0;
        width: calc(100vw - 15px);
    }
    main {
        width: 120vw;
        height: 120vh;
        background: gray;
    }
</style>
</head>

<body>
    <header> Header
    </header>
    <main>
        <div>Main stuff</div>
        <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
    </main>
</body>

</html>

此代码片段不切换到移动视图并显示问题，只是为了完整性而提供。

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  width: max-content;
}

body {
  margin: 0;
}

header {
  background: goldenrod;
  border-right: 1px solid red;
  position: sticky;
  left: 0;
  width: calc(100vw - 12px);
}

main {
  width: 200vw;
  height: 120vh;
  background: gray;
}

<header>Header, should stick horizontally, scroll vertically as usual
</header>
<main>

  <div>Main stuff</div>
  <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
</main>

Answer 1

问题出在

width: calc(100vw - 12px)

。这是从移动设备中较小的视图宽度中减去固定数量的像素。结果，该栏似乎没有到达窗口的右边框。

尝试使用

width: calc(100vw)

或

width: calc(99vw)

或创建

@media

查询。

CSS：水平粘贴元素仅适用于桌面，不适用于移动设备

问题描述投票：0回答：1

1个回答

最新问题

CSS：水平粘贴元素仅适用于桌面，不适用于移动设备

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1