时间戳

首页 > 解决方案 > Mac 上的 Chrome：使用“位置：粘性”时滚动条消失

html - Mac 上的 Chrome：使用“位置：粘性”时滚动条消失

问题描述

请注意：此问题仅在 Mac 上的 Chrome 中发生。

当可滚动容器的子项设置为position: sticky;可滚动元素的滚动条时，将不再可见。

我试图设置规则的z-index值::-webkit-scrollbar，但这似乎不起作用。我还认为这是z-index子元素的问题，但在此示例中，子元素没有设置背景，并且仍会在它们下方显示滚动条。

在我的系统偏好设置中，我已将“显示滚动条”设置为“滚动时”

如何让滚动条显示在 Mac 上的 Chrome 中？

.StickyContainer {
  border: 1px solid green;
  width: 350px;
  height: 180px;
  overflow: auto;
}

.StickyContainer__box {
  width: 500px;
  height: 100px;
  border: 1px solid red;
  position: sticky;
  top: 0;
}
<div class="StickyContainer">
  <div class="StickyContainer__box">Box 1</div>
  <div class="StickyContainer__box">Box 2</div>
  <div class="StickyContainer__box">Box 3</div>
  <div class="StickyContainer__box">Box 4</div>
  <div class="StickyContainer__box">Box 5</div>
  <div class="StickyContainer__box">Box 6</div>
</div>

标签： htmlcssscrollbarsticky

解决方案

Chromium 问题跟踪网站上有一个错误报告：

https://bugs.chromium.org/p/chromium/issues/detail?id=1033712

该问题已得到确认，目前正在调查中。

现在，您可以添加will-change:transform到父元素来解决此问题。

推荐阅读