css - 如何在 Firefox 上使用覆盖滚动？

Question

在 chrome 和 safari 中，我通过使用::after 伪类创建的叠加层滚动浏览内容。

在 firefox 中我不能。

我试过更改 z-index，但渐变被隐藏了。

更改 top: 80% 但渐变没有达到预期的效果，20% 的高度仍然不可滚动。

有更好的解决方案吗？

HTML

<section>
    <div>
        <p>
        Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus.
        In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat.
        Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer
        vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla
        mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam
        quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In
        sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat.
        Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer
        vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla
        mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam
        quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In
        sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat.
        Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer
        vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi. Maecenas libero. Duis risus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla
        mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliquam erat volutpat. Etiam commodo dui eget wisi.it diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Aliq
        </p>
    </div>
</section>

SCSS

body {
background: black;
section {
    position: relative;
    div {
        height: 500px;
        width: 500px;
        overflow-y: scroll;
        p {
            color: white;
        }
        &:after {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background: -moz-linear-gradient(
                top,
                rgba(137, 255, 241, 0) 0%,
                rgba(0, 0, 0, 1) 100%
            );
            /* FF3.6+ */
            background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                color-stop(0%, rgba(137, 255, 241, 0)),
                color-stop(100%, rgba(0, 0, 0, 1))
            );
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(
                top,
                rgba(137, 255, 241, 0) 0%,
                rgba(0, 0, 0, 1) 100%
            );
            /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(
                top,
                rgba(137, 255, 241, 0) 0%,
                rgba(0, 0, 0, 1) 100%
            );
            /* Opera 11.10+ */
            background: -ms-linear-gradient(
                top,
                rgba(137, 255, 241, 0) 0%,
                rgba(0, 0, 0, 1) 100%
            );
            /* IE10+ */
            background: linear-gradient(
                to bottom,
                rgba(137, 255, 241, 0) 0%,
                rgba(0, 0, 0, 1) 100%
            );
            /* W3C */
        }
      }
   }
 }

或者例子是在codepen这里设置的: https://codepen.io/hellojessicagraham/pen/jpepMv

Answer 1

:after 元素位于 div 之上，防止元素聚焦 => 滚动。

尝试将 overflow-y: scroll 放在 section 上