[英]Add linear gradient to a scrollable div
I need to add white linear gradient to the bottom of the scrollable div and it should always be at the bottom of a div.我需要在可滚动 div 的底部添加白色线性渐变,它应该始终位于 div 的底部。 I am adding it using position fixed and it works on all browsers except IE >= 9.I need it for all browsers include IE>=9.我使用固定位置添加它,它适用于除 IE >= 9 之外的所有浏览器。我需要它用于所有浏览器,包括 IE>=9。 It should looks like this - http://prntscr.com/ne3rfe它应该看起来像这样 - http://prntscr.com/ne3rfe
Here is that div's css code这是那个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);
}
You can do this using the :before
or :after
css selector on the parent div/container:您可以使用父 div/容器上的:before
或:after
css 选择器来执行此操作:
Option 1:选项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 https://codepen.io/anon/pen/KYRvqz
Option 2: (works with scrolling)选项 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>
What I've done here is, I've made two wrappers for the text and I gave the .contentwrapper, pointer-events: none;
我在这里所做的是,我为文本制作了两个包装器,并给出了 .contentwrapper, pointer-events: none;
so that you can scroll, click, hover, etc through the .contentwrapper.这样您就可以通过 .contentwrapper 滚动、单击、悬停等。
This will give the fading effect to the scrollbar as well, to fix that just change this:这也会给滚动条带来淡入淡出的效果,要解决这个问题,只需更改以下内容:
.containerwrapper:before {
width: 100%;
}
to:至:
.containerwrapper:before {
width: calc(100% - 17px); // 17px is the width for the default scrollbar
}
https://codepen.io/anon/pen/gyzGGM?editors=1100 https://codepen.io/anon/pen/gyzGGM?editors=1100
Option 3 (works without absolute positioning):选项 3(无需绝对定位即可工作):
See kmoser's answer .请参阅kmoser 的回答。
Hope this helps!希望这可以帮助!
Option 2 posted by @Tigerrrrr works great when you can absolutely position the containing div, but that's not always practical on a page where the div needs to stay within the normal document flow.当您可以绝对定位包含的 div 时,@Tigerrrrr 发布的选项 2 效果很好,但这在 div 需要保持在正常文档流中的页面上并不总是可行的。
Here's an example that doesn't have to be absolutely positioned.这是一个不必绝对定位的示例。
div.main { background-color: black; color: white; } h1 { color: yellow; } div.songs-wrapper { width: 100%; position: relative; } div.songs-wrapper::after { content: ""; position: absolute; bottom: 0; left: 0; right: 15px; height: 120px; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 100% ); } div.songs { overflow-y: scroll; height: 400px; display: block; scrollbar-width: thin; scrollbar-color: #ff2222 #444444; padding: 0px 5% 0px 5%; } div.songs ul { margin: 0; padding: 0; padding-bottom: 50px; /* So we scroll just past the faded part */ -webkit-columns: 250px 3; -moz-columns: 250px 3; columns: 250px 3; } div.songs li { text-align: center; font-size: 1.2rem; line-height: 1.4rem; margin-bottom: 10px; list-style-type: none; /* '\2022'; */ -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
<div class="main"> <h1>Stuff Before</h1> <div class="songs-wrapper"> <div class="songs"> <ul> <li> Accentuate the Positive <span>(F)</span> </li> <li> Ain't Misbehavin' <span>(Bb)</span> </li> <li> All of Me <span>(C)</span> </li> <li> All of You <span></span> </li> <li> All or Nothing at All <span>(C)</span> </li> <li> All the Things You Are <span>(Ab)</span> </li> <li> Almost Like Being In Love <span>(Bb)</span> </li> <li> April in Paris <span>(Ab)</span> </li> <li> Autumn Leaves <span>(Em)</span> </li> <li> Be Careful, It's My Heart <span>(F)</span> </li> <li> The Best Things in Life are Free <span>(C)</span> </li> <li> Bewitched <span>(C)</span> </li> <li> Blue Skies <span>(Eb)</span> </li> <li> The Boulevard of Broken Dreams <span></span> </li> <li> But Not For Me <span>(Bb)</span> </li> <li> Bye Bye Blackbird <span>(F)</span> </li> <li> Call Me <span>(G)</span> </li> <li> Candy <span>(F)</span> </li> <li> Cheek to Cheek <span>(Ab)</span> </li> <li> Coquette <span>(C)</span> </li> <li> Cry Me a River <span>(C)</span> </li> <li> Don't Get Around Much Anymore <span>(C)</span> </li> <li> East of the Sun and West of the Moon <span>(G)</span> </li> <li> Embraceable You <span>(F)</span> </li> <li> Ev'ry Time We Say Goodbye <span>(C)</span> </li> <li> Fly Me To The Moon <span>(C)</span> </li> <li> The Frim Fram Sauce <span>(Bb)</span> </li> <li> From This Moment On <span>(Ab)</span> </li> <li> Get Me to the Church on Time <span>(G)</span> </li> <li> The Girl From Ipanema <span>(F)</span> </li> <li> Have You Met Miss Jones? <span>(F)</span> </li> <li> Hello, Young Lovers <span>(C)</span> </li> <li> Honeysuckle Rose <span>(F)</span> </li> <li> How Deep is the Ocean? <span>(C)</span> </li> <li> I Believe in You <span>(G)</span> </li> <li> I Can't Give You Anything But Love <span>(G)</span> </li> <li> I Could Write a Book <span>(Bb)</span> </li> <li> I Love Paris <span>(C)</span> </li> <li> I Wish I Were in Love Again <span>(G)</span> </li> <li> I Wish You Love <span>(Eb)</span> </li> <li> I'll Be Seeing You <span>(Bb)</span> </li> <li> I'll Never Smile Again <span>(C)</span> </li> <li> I'm Beginning to See the Light <span>(G)</span> </li> <li> I'm Gonna Sit Right Down and Write Myself a Letter <span>(C)</span> </li> <li> I've Got My Love to Keep Me Warm <span>(Eb)</span> </li> <li> I've Got the World On a String <span>(C)</span> </li> <li> I've Got You Under My Skin <span>(C)</span> </li> <li> I've Never Been In Love Before <span>(G)</span> </li> <li> If I Didn't Care <span>(Bb)</span> </li> <li> If I Were a Bell <span>(C)</span> </li> <li> In the Wee Small Hours of the Morning <span>(C)</span> </li> <li> Is You Is, Or Is You Ain't My Baby? <span>(Ab)</span> </li> <li> It All Depends on You <span>(G)</span> </li> <li> It Don't Mean a Thing (If It Ain't Got That Swing) <span>(Bb)</span> </li> <li> It Had to be You <span>(Eb)</span> </li> </ul> </div> </div> <h1>Stuff After</h1> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.