css - 伪元素在具有透明背景时不可滚动

Question

我有一些文本显示在::after我希望可滚动的伪元素中。在我从以下位置更改该元素的背景之前，它工作正常：

background-color: rgb(0,0,0);

至：

background-color: rgba(0,0,0,0.5);

有没有办法允许在透明背景下滚动？

---

这是带有工作和损坏示例的 HTML：

<div class="wrapper">

  <div class="column working">
    <p>Working: text is scrolling properly.</p><br>
    <div class="container">
      <img src="https://source.unsplash.com/random/400x200" />
    </div>
  </div>

  <div class="column broken">
    <p>Broken: text is not scrolling.</p><br>
    <div class="container">
      <img src="https://source.unsplash.com/random/400x200" />
    </div>
  </div>

</div>

以及与之配套的 CSS：

* {
  margin: 0;
  padding: 0;

}

.wrapper {
  display: flex;
}

.column {
  padding: 1rem;
  background: yellowgreen;
}

.container {
  display: inline-block;
  position: relative;
  font-family: monaco;
}

.container::after {
  content: "Dis iusto aliquid sollicitudin iaculis modi fugit, non irure quisquam molestiae arius laboris, eiusmod? Pulvinar eleifend volutpat, quae nunc magnam? Hac, nam? Dignissimos esse diamlorem dolore accusamus dolores, ipsa facilis ullam illo, fames ex? Maecenas tellus. Aspernatur eum malesuada, assumenda, hac, ultricies? Aliquet in, harum fugiat! Volutpat recusandae! Fames saepe fames corrupti.";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: inherit;
  height: inherit;
  padding: 1rem;
  z-index: 10;
  overflow-x: scroll;
  cursor: pointer;
  font-family: monaco;
  line-height: 1.5em;
  color: aqua;
}

.column.working .container::after {
  background-color: rgb(0,0,0);
}

.column.broken .container::after {
  background-color: rgba(0,0,0,0.5);
}

img {
  display: block;
}

p {
  font-family: monaco;
}

这是上面的代码，在CodePen

谢谢。

标签： cssscrollfrontendoverflowpseudo-element