CSS-溢出：滚动；-总是显示垂直滚动条？

  • Z时代
  • 2024-01-10
  • 分类：问答

所以目前我有：

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

但是，我认为对于某些用户来说，那里有更多的内容是显而易见的。他们可以在不知道我的div实际包含更多内容的情况下向下滚动页面。我使用510px的高度，因此它会截断一些文本，因此在某些页面上看起来确实有更多内容，但这不适用于所有页面。

我使用的是Mac，在Chrome和Safari中，垂直滚动条仅在鼠标悬停在Div上并且您正在滚动时才会显示。有没有办法一直显示它？

回答：

我自己就遇到了这个问题。OSx Lion在不使用时会隐藏滚动条，使它看起来更“光滑”，但是同时出现了您解决的问题：人们有时看不到div是否具有滚动功能。

解决方法：在您的CSS中包括-

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
/* always show scrollbars */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
/* css for demo */
#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}
#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}
/* === ignore stuff below, it's just to help with the visual. === */
#container {
  background-color: #ffc;
}
#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}
<div id="container">
  <div id="child">Example</div>
</div>

以上是 CSS-溢出：滚动；-总是显示垂直滚动条？ 的全部内容， 来源链接： utcz.com/qa/433502.html

回到顶部