CSS - Overflow: Scroll; - 总是显示垂直滚动条？

17 浏览
0 Comments

CSS - Overflow: Scroll; - 总是显示垂直滚动条？

目前我拥有:

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

然而，我不认为对一些用户会很明显那里有更多的内容。他们可能会滚动页面，不知道我的 div 实际上包含了更多内容。我使用 510px 的高度来截断一些文本，以便在某些页面上看起来像有更多的内容，但这并不适用于所有页面。

我正在使用 Mac，在 Chrome 和 Safari 中，垂直滚动条只有当鼠标悬停在 Div 上并且你主动滚动时才会显示。有没有办法始终显示它？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

对于来到这里的任何人在2021年及以后的年份:

“在iOS 14中不再支持自定义滚动条。”

这是根据developer.apple.com论坛上的一位官方“框架工程师”的说法。

0
0 Comments

我自己遇到了这个问题。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;
}


  Example

根据需要自定义外观。来源

0