在滚动视图的底部添加渐变效果

Question

我创建了一个滚动视图，上面有一些文本。我想在文本底部创建渐变效果。我发现了一个类似的问题，并试图在我的例子中实现它，你可以在这个小提琴上看到。渐变不是固定在滚动视图的底部，颜色也不是真正透明的。你对这个问题有想法吗？

这是我的代码

.overlay {
position: absolute;
background: rgba(0, 0, 0, 0.7);
height: 200px;
width: 500px;
top: 50px;
left: 20px;
bottom: 50px;
z-index: 100;
}
.scrollviewwrapper {
position: absolute;
top: 0;              
left: 0;
right: 0;
bottom: 0;
padding: 30px; 
overflow: scroll;
}
.scrollviewwrapper:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
pointer-events: none;
}

Answer 1

您需要更改一些内容：

• 由于您当前的背景颜色是rgba(0,0,0,0.7)(深灰色(，转换为#4c4c4c(或rgba(76,76,76,1)(的纯色，因此需要在渐变中使用它，使其融入其中
• 我还必须使.overlay元素成为.scrollviewwrapper的after的引用(通过从.scrollviewwrapper中删除position(，以防止伪元素与其父内容一起滚动。我还必须将box-sizing:border-box添加到其中，以便在其大小中包含填充

看到它工作：

document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);
this.title_element.html('<ul>r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>r</ul> <ul>r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>r</ul> ');
function keyDownTextField(e) {
alert(document.getElementById('scrollviewwrapper').scrollTop);
var keyCode = e.keyCode;
if(keyCode==38) {
// up arrow
} else if(keyCode==40) {
	// down arrow
}
}

.overlay {
position: absolute;
background: rgba(0, 0, 0, 0.7);
height: 190px;
width: 500px;
z-index: 100;
}
.scrollviewwrapper {
top: 0;              
left: 0;
right: 0;
bottom: 0;
padding: 30px; 
overflow: auto;
color: white;
height: 190px;
box-sizing: border-box;
}
.scrollviewwrapper:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: calc(100% - 21px);
height: 40px;
margin-left: -30px;
background-image: linear-gradient(to bottom, rgba(76,76,76,0),  rgba(76,76,76,1));
pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
<div class="scrollviewwrapper" id="scrollviewwrapper">
test
</div>
</div>

注意，我还为:after伪元素添加了一个负左边距，并将.scrollviewwrapper的溢出更改为auto，因此如果内容需要，它只显示一个垂直滚动条。

Answer 2

将伪元素添加到.overlay：

document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);
this.title_element.html('<ul>r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>r</ul> <ul>r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>r</ul> ');
function keyDownTextField(e) {
alert(document.getElementById('scrollviewwrapper').scrollTop);
var keyCode = e.keyCode;
if (keyCode == 38) {
// up arrow
} else if (keyCode == 40) {
// down arrow
}
}

.overlay {
position: absolute;
background: rgba(0, 0, 0, 0.7);
height: 200px;
width: 500px;
top: 50px;
left: 20px;
bottom: 50px;
z-index: 100;
}
.overlay::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
pointer-events: none;
}
.scrollviewwrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 30px;
overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
<div class="scrollviewwrapper" id="scrollviewwrapper">
test
</div>
</div>