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上

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

1 个答案: