将线性渐变添加到可滚动的 div

Question

我需要在可滚动 div 的底部添加白色线性渐变，它应该始终位于 div 的底部。我使用固定位置添加它，它适用于除 IE >= 9 之外的所有浏览器。我需要它用于所有浏览器，包括 IE>=9。它应该是这样的 - http://prntscr.com/ne3rfe

这是那个div的css代码

 .perfect-scrollbar::before {
  content: "";
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: #7db9e8;
  background: -moz-linear-gradient(top, #7db9e8 0%, #1e5799 101%);
  background: -webkit-linear-gradient(top, #7db9e8 0%, #1e5799 101%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, .8) 101%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=0);
} 

Answer 1

您可以使用父 div/容器上的:before或:aftercss 选择器执行此操作：

选项1：

body {
  margin: unset;
}

.container {
  border: 3px solid black;
  width: 500px;
  height: 100px;
  padding: 0;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  font-family: calibri;
  overflow-y: auto;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.container:before {
  content: '';
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, white);
  height: 50%;
  width: 100%;
}

<div class="container">
  <div>item1 - test</div>
  <div>item2 - test</div>
  <div>item3 - test</div>
  <div>item4 - test</div>
  <div>item5 - test</div>
</div>

https://codepen.io/anon/pen/KYRvqz

选项 2：（适用于滚动）

body {
  margin: unset;
}

.containerwrapper {
  border: 3px solid black;
  width: 500px;
  height: 100px;
  padding: 0;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow-y: auto;
  font-size: 30px;
  font-family: calibri;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.containerwrapper:before {
  content: '';
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, white);
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

<div class="containerwrapper">
  <div class="container">
    <div>item1 - test</div>
    <div>item2 - test</div>
    <div>item3 - test</div>
    <div>item4 - test</div>
    <div>item5 - test</div>
  </div>
</div>

我在这里所做的是，我为文本制作了两个包装器，并提供了 .contentwrapper，pointer-events: none;以便您可以通过 .contentwrapper 滚动、单击、悬停等。

这也将为滚动条提供淡入淡出效果，要解决这个问题，只需更改以下内容：

.containerwrapper:before {
  width: 100%;
}

到：

.containerwrapper:before {
  width: calc(100% - 17px); // 17px is the width for the default scrollbar
}

https://codepen.io/anon/pen/gyzGGM?editors=1100

希望这可以帮助！