在 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
最佳答案
:after
元素位于 div
之上,防止元素聚焦 => 滚动。
尝试将 overflow-y: scroll
放在 section
上
关于css - 如何在 Firefox 上使用覆盖滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51868797/