html - 如何防止窗口范围内的粘性元素在更宽的 block 内滚动？

Question

我正在开发一个涉及大量滚动、利用粘性定位的 Web 界面，除了一个小细节外，它的工作效果非常好。下面是一个极简主义的例子。你可以try it on CodePen查看即时贴在水平和垂直滚动时的工作原理。

<header>
 <nav>
  <ul id=menu class=flex><li><a href="#">Menu bar item</a></li></ul>
 </nav>
 <div class=flex>
  <div id=button>Button</div>
  <div id=bar>Bar wider than the window</div>
 </div>
</header>
<main class=flex>
 <div id=leftbar></div>
 <div id=content></div>
</main>

*           {line-height: 2em; background-position: center center}
body        {margin: 0; padding: 0}
body, a     {color: #fff}
ul,li       {margin: 0; padding: 0; list-style-type: none}
.flex       {display: flex}
.flex > *   {flex: 0 0 auto}
header      {display: block; position: sticky; top: 0; left: 0; z-index: 1;
             width: min-content; min-width: 100%; background: #000066}
#menu       {flex-wrap: wrap; position: sticky; left: 0; width: 100vw;
             background: #006600}
#button     {position: sticky; left: 0; width: 4em; background: #000066}
#bar        {width: 150vw}
main        {min-height: 100vh} /* Ensure scrollbar */
#leftbar    {position: sticky; left: 0; width: 4em; background: #444444}
#content    {width: 150vw}
/* Background grid to visualize scrolling parts */
#bar, #leftbar, #content {
 background-image: url(data:image/gif;base64,R0lGODlhEAAQAIABAO7u7v///yH5BAEKAAEA
 LAAAAAAQABAAAAIdhI9pwe0PnnRxzmphlniz7oGbmJGWeXmU2qAcyxQAOw==)}

问题出在最顶层的菜单栏，它应该像固定标题一样始终保持在原位，但必须是粘性的。 100vw 宽度完美工作，直到一直滚动到右侧。此时，菜单栏的最左侧部分滚出 View ，可能是由于垂直滚动条未计入 100vw。

固定定位是不可能的，因为菜单栏的高度会变化，所以这需要一堆非常丑陋的 JS 读取 offsetHeight 并在每次 DOM 更改后移动下面的元素– 呸!

肯定有办法在纯 CSS 中或通过更改文档结构来解决这个小问题吗？

编辑: 我看到 JS 解决方案开始涌入，所以让我们用这 3 行 JS 来阻止它，它可以轻松解决问题。我只是更喜欢 CSS/HTML 解决方案，以避免将来出现代码维护问题。

var f=function() {document.getElementById('menu').style.width=document.body.clientWidth+'px';};
window.addEventListener('DOMContentLoaded',f);
window.addEventListener('resize',f);

Answer 1

如评论中所述，问题是 100vw 包含滚动条宽度。对此没有真正优雅的解决方案，但解决方法是将 #menu 宽度减小到 99vw，然后用具有相同背景颜色的伪元素填充空白区域。

#menu {
  width: 99vw;
  background: #006600;
}
#menu:before {
  content: '';
  width: 5vw;
  left: 100%;
  top: 0;
  bottom: 0;
  position: absolute;
  background: inherit;
}

请注意，这仅在您的 #menu 上有平坦的背景色(无图像，无透明度)时有效，所以我不确定它是否对您的情况有帮助，但它是我能想到的最佳跨浏览器解决方案。

参见:https://codepen.io/anon/pen/WWLedm