【发布时间】：2019-01-22 22:14:33
【问题描述】：
在 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
【问题讨论】：
标签： css firefox scroll pseudo-element