网站滚动条在很小的时候变得不可见

Question

我正在使用 -webkit-scrollbar 伪元素为桌面 webkit 浏览器自定义 React 网络应用程序上的滚动条。它用于滚动 'chat-box' 类元素中的消息，其 overflow-y 属性设置为 'auto'。在大多数情况下，此功能正常，如下图所示（右侧的灰色滚动条）：

随着添加的消息越来越多，灰色滚动条滑块的高度自然会降低。当消息框填充许多长消息时出现问题：

拇指似乎越来越小，直到消失。滚动功能仍然有效。这可以在下图中看到（右侧的滚动条消失了）：

下面是设置滚动条样式的 css 代码（为了为滚动条创建 'padding'，我使用了 answer to this question）：

::-webkit-scrollbar {
  width: 24px; 
}
::-webkit-scrollbar-thumb {
  border: 9px solid rgba(248, 230, 230, 0);
  background-clip: padding-box;
  border-radius: 20px;
  background-color: #d9d9d9;
  box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

我试图通过向滚动条添加 min-height: 5px; 来解决这个问题，但没有成功。

JSFiddle (Add more letters to see scrollbar disappear).

任何帮助将不胜感激。

Answer 1

大多数移动浏览器在不滚动时会自动隐藏滚动条。这样做的原因是允许更多 space 内容在已经很小的宽度环境中使用。

滚动时滚动条应该可见，停止滚动时会消失，正如您在这个无样式示例中看到的那样（在 mobile/mobile 模式下打开。在桌面上，您可能需要在启动移动模式后刷新才能正确看到效果):

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, odit ratione saepe in molestiae, nesciunt recusandae voluptas corrupti ex autem fugiat commodi totam exercitationem laboriosam suscipit facilis non optio iusto.</p> (repeat many times)

https://codepen.io/anon/pen/bXBZRX

Answer 2

问题出在 background-clip: padding-box;。

当内容变得太长时，其高度变为 0

添加 min-height，高度大于 5px（大约 30px），它会正常工作。

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  word-wrap: break-word;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 24px;
}

::-webkit-scrollbar-thumb {
  border: 9px solid rgba(248, 230, 230, 0);
  background-clip: padding-box;
  border-radius: 20px;
  background-color: #d9d9d9;
  min-height: 30px;
  box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

 <div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    </div>

网站滚动条在很小的时候变得不可见

Website scrollbar becoming invisible when small

html

css

webkit

scrollbar

reactjs