When using Chrome and Safari, I can easily scroll through the content with an overlay created using the ::after pseudo class.
However, in Firefox, this functionality doesn't work as expected.
I attempted to adjust the z-index, but that caused the gradient to be hidden.
Changing the top: 80% property did not have the desired effect, as 20% of the height still remained unscrollable.
Is there a better solution for this issue?
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.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 */
}
}
}
}
To view the example set up on codepen, click here.