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

小编典典

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

css

所以目前我有：

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

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

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

阅读 1246

2020-05-16

共1个答案

小编典典

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

2020-05-16