如何强制垂直滚动条始终出现在 CSS 中？

如何在 CSS 中始终显示垂直滚动条

在某些情况下，您可能希望确保垂直滚动条始终可见，即使 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);
}

第一行删除默认的浏览器样式第二行定义滚动条拇指的自定义样式。

例如：

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
  
  ::-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 中？的详细内容。更多信息请关注PHP中文网其他相关文章！