滚动条不出现答案

【问题标题】：scrollbar does not appear滚动条不出现
【发布时间】：2022-02-09 01:47:32
【问题描述】：

所以进入页面时滚动条不显示，只有使用鼠标滚动时才会出现我已经尝试过： z 指数：10

溢出：滚动

!重要

但是没有一个起作用，它仍然有同样的错误，我不知道它可能是什么。我在 1.4.0 版中使用 plugin-perfect-scrollbar.scss

容器

.ps {
  background-color: aqua;
}

滚动条

.ps__rail-x {
  display: none;
  opacity: 1 !important;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 1 !important;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

【问题讨论】：

你尝试过溢出：滚动？

标签： javascript css reactjs sass

【解决方案1】：

您必须设置overflow: scroll;，然后您可以通过在CSS 中添加::-webkit-scrollbar 来插入手动滚动条。含义 - 只要有滚动条或overflow: scroll;，这些样式就会生效。

下面的小演示：

div {
  border: solid black 1px;
  width: 300px;
  height: 40px;
  overflow: scroll;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px 10px #ffd110;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px black;
}

<div>
  <p>DIVDIVDIVDIVDIVDIVDIVDIVDIV<br>DIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIVDIV</p>
</div>

【讨论】：