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

所以目前我有：

#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>

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

请注意，在iPad Safari上，NoviceCoding的解决方案如果webkit-overflow-scrolling: touch;在CSS的某处存在，将无法使用。解决方案是删除所有出现的内容，-webkit-overflow-scrolling: touch;或者-webkit-overflow-scrolling: auto;使用NoviceCoding的解决方案。

根据我的测试，这将可以在iOS 7.1.x上的Safari上的iPad上使用，不过我不确定iOS 6。但是，它在Firefox上不起作用。有一个jQuery插件旨在与跨浏览器兼容，称为jScrollPane。

另外，Stack Overflow上还有一个重复的帖子，其中包含其他一些详细信息。

当窗口中有必须滚动才能访问的内容时，这将使滚动条始终显示，它适用于Mac上的所有窗口和所有应用程序：

从Apple菜单中启动系统偏好设置，单击“常规”设置面板，查找“显示滚动条”，然后选择“始终”旁边的单选框。完成后，退出系统偏好设置