html - 向可滚动的 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 或 :after css 选择器执行此操作:

选项 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 等。

这也会给滚动 strip 来淡入淡出的效果，要解决这个问题只需改变一下:

.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

选项 3(在没有绝对定位的情况下工作):

参见 kmoser's answer .

希望这对您有所帮助!