CSS overlay 避免重叠滚动条答案

【问题标题】：CSS overlay avoid overlap scrollbarCSS overlay 避免重叠滚动条
【发布时间】：2023-01-19 20:56:36
【问题描述】：

我正在尝试创建一个水平滚动指示器叠加层，让用户知道有更多内容滚动。问题是叠加层与滚动条的 div 重叠。

这是我使用的示例代码https://codepen.io/jonathantejedera/pen/ExpbEmP。

代码：

.containerwrapper {
  border: 3px solid black;
  width: 500px;
  height: 100px;
  padding: 0;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow-x: auto;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-family: calibri;
  overflow: hidden;
}

.containerwrapper:before {
  content: '';
  position: absolute;
  right: 0;
  background: linear-gradient(to right, transparent, red);
  height: 100%;
  width: calc(100% - 17px);
  pointer-events: none;
  z-index: 0;
}

.container {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

<div class="containerwrapper">
  <div class="container">
    <div>item1 - test</div>
    <div>item2 - test</div>
    <div>item3 - test</div>
    <div>item4 - test</div>
    <div>item5 - test</div>
  </div>
</div>

我将背景设置为红色，颜色后面是我想保留的滚动条。如何显示背景并保持滚动条可见？

谢谢。

【问题讨论】：

为什么要为背景使用伪元素？为什么不把它放在容器包装纸或容器上呢？但是如果你设置为使用伪元素，那么将它的 z-index -1 而不是 0，它会将它推到滚动条后面

标签： html css

【解决方案1】：

要修复它，请将 z-index: 0; 更改为 z-index:-1；

.containerwrapper {
  border: 3px solid black;
  width: 500px;
  height: 100px;
  padding: 0;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow-x: auto;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-family: calibri;
  overflow: hidden;
}

.containerwrapper:before {
  content: '';
  position: absolute;
  right: 0;
  background: linear-gradient(to right, transparent, red);
  height: 100%;
  width: calc(100% - 17px);
  pointer-events: none;
  z-index: -1;
}

.container {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}

<div class="containerwrapper">
  <div class="container">
    <div>item1 - test</div>
    <div>item2 - test</div>
    <div>item3 - test</div>
    <div>item4 - test</div>
    <div>item5 - test</div>
  </div>
</div>

【讨论】：