html {
background: #FFF;
}
.scrollbox {
position: relative;
z-index: 1;
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
background: #FFF no-repeat;
background-image: -webkit-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), -webkit-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -moz-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), -moz-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-position: 0 0, 0 100%;
background-size: 100% 14px;
}
.scrollbox:before,
.scrollbox:after {
content: "";
position: relative;
z-index: -1;
display: block;
height: 30px;
margin: 0 0 -30px;
background: -webkit-linear-gradient(top, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
background: -moz-linear-gradient(top, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
background: linear-gradient(to bottom, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
}
.scrollbox:after {
margin: -30px 0 0;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
}
<div class="scrollbox">
<ul>
<li>Not enough content to scroll</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="scrollbox">
<ul>
<li>Ah! Scroll below!</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>The end!</li>
<li>No shadow there.</li>
</ul>
</div>
h1
. if you remove this padding, the affect sort goes away. I'm looking for something that pushes that fade layer completely out of the way when it's not needed. I've been messing withposition: sticky
but i'm wondering if there's an easier way.