我需要在可滚动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);
}
答案 0 :(得分:2)
您可以使用父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进行滚动,单击,悬停等。
这也将使滚动条具有淡入淡出的效果,以解决此问题,只需更改此即可:
.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
希望这会有所帮助!