Question

我创建一个带有一些文本的滚动视图。我想在文本底部创建淡入淡出效果。我在示例similar question中看到了一个fiddle试图实现它的尝试。淡入淡出没有固定在滚动视图的底部，并且颜色并不是真正透明的。您对这个问题有想法吗？

这是我的代码

.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之后的引用（通过从position中删除.scrollviewwrapper）来防止伪元素从与其父内容一起滚动。我还必须在其中添加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>

在滚动视图的底部添加淡入淡出效果

2 个答案: