How to create a mask that fades out scrolled content, but does not overlap the scrollbar?CSS Layout with Pixel And PercentsIE6 bug, CSS, position absolute and height 100% inner DIVCSS3 Flip effect with variable size contentVertical Middle overlay on top of img of undefined height, possible?size of a div equal to browser viewport and when i scoll down it scrolls for further content.How can I make this 100% height + column overflow layout work in Firefox and IE?JS thumbnail slider not working with AJAX?Cannot display HTML stringCSS position:fixed is working for the header but not for the footerHow can I do an absolute div (with some content inside) stretched to its parent div?
What are the advantages of simplicial model categories over non-simplicial ones?
Electoral considerations aside, what are potential benefits, for the US, of policy changes proposed by the tweet recognizing Golan annexation?
Can a college of swords bard use blade flourish on an OA from dissonant whispers?
How do I delete all blank lines in a buffer?
Why does AES have exactly 10 rounds for a 128-bit key, 12 for 192 bits and 14 for a 256-bit key size?
Has any country ever had 2 former presidents in jail simultaneously?
Is this toilet slogan correct usage of the English language?
When were female captains banned from Starfleet?
How could a planet have erratic days?
Mimic lecturing on blackboard, facing audience
Fear of getting stuck on one programming language / technology that is not used in my country
creating a ":KeepCursor" command
Did arcade monitors have same pixel aspect ratio as TV sets?
Angel of Condemnation - Exile creature with second ability
Recommended PCB layout understanding - ADM2572 datasheet
How do you make your own symbol when Detexify fails?
Terse Method to Swap Lowest for Highest?
Does Doodling or Improvising on the Piano Have Any Benefits?
Mixing PEX brands
Creepy dinosaur pc game identification
Yosemite Fire Rings - What to Expect?
Strong empirical falsification of quantum mechanics based on vacuum energy density?
Does an advisor owe his/her student anything? Will an advisor keep a PhD student only out of pity?
Does IPv6 have similar concept of network mask?
How to create a mask that fades out scrolled content, but does not overlap the scrollbar?
CSS Layout with Pixel And PercentsIE6 bug, CSS, position absolute and height 100% inner DIVCSS3 Flip effect with variable size contentVertical Middle overlay on top of img of undefined height, possible?size of a div equal to browser viewport and when i scoll down it scrolls for further content.How can I make this 100% height + column overflow layout work in Firefox and IE?JS thumbnail slider not working with AJAX?Cannot display HTML stringCSS position:fixed is working for the header but not for the footerHow can I do an absolute div (with some content inside) stretched to its parent div?
1
I have a container which is not the body element. This container is scrollable. Now the content should fade out at the top when scrolled.
This container itself is positioned absolute. The markup and CSS are not given and can be changed.
Unfortunately no matter what I try, I end up with two scenarios:
1 The "mask" does scroll up as well:
.scrollable
position: absolute;
width: 300px;
height: 200px;
padding: 40px 0;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>2 The "mask" is overlapping the scrollbar:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>I also tried adding another container to act as the "mask" with different z-indexes, tried fixed positioning etc.
So, I can't figure out any other markup and CSS where:
- the content is scrollable
- the "mask" stays at the top
- the "mask" doesn't overlap the scrollbar
How can I solve this?
html css html5 css3
asked yesterday
lampshadelampshade
5601332
add a comment |
1
I have a container which is not the body element. This container is scrollable. Now the content should fade out at the top when scrolled.
This container itself is positioned absolute. The markup and CSS are not given and can be changed.
Unfortunately no matter what I try, I end up with two scenarios:
1 The "mask" does scroll up as well:
.scrollable
position: absolute;
width: 300px;
height: 200px;
padding: 40px 0;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>2 The "mask" is overlapping the scrollbar:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>I also tried adding another container to act as the "mask" with different z-indexes, tried fixed positioning etc.
So, I can't figure out any other markup and CSS where:
- the content is scrollable
- the "mask" stays at the top
- the "mask" doesn't overlap the scrollbar
How can I solve this?
html css html5 css3
asked yesterday
lampshadelampshade
5601332
add a comment |
1
1
1
I have a container which is not the body element. This container is scrollable. Now the content should fade out at the top when scrolled.
This container itself is positioned absolute. The markup and CSS are not given and can be changed.
Unfortunately no matter what I try, I end up with two scenarios:
1 The "mask" does scroll up as well:
.scrollable
position: absolute;
width: 300px;
height: 200px;
padding: 40px 0;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>2 The "mask" is overlapping the scrollbar:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>I also tried adding another container to act as the "mask" with different z-indexes, tried fixed positioning etc.
So, I can't figure out any other markup and CSS where:
- the content is scrollable
- the "mask" stays at the top
- the "mask" doesn't overlap the scrollbar
How can I solve this?
html css html5 css3
asked yesterday
lampshadelampshade
5601332
I have a container which is not the body element. This container is scrollable. Now the content should fade out at the top when scrolled.
This container itself is positioned absolute. The markup and CSS are not given and can be changed.
Unfortunately no matter what I try, I end up with two scenarios:
1 The "mask" does scroll up as well:
.scrollable
position: absolute;
width: 300px;
height: 200px;
padding: 40px 0;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>2 The "mask" is overlapping the scrollbar:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>I also tried adding another container to act as the "mask" with different z-indexes, tried fixed positioning etc.
So, I can't figure out any other markup and CSS where:
- the content is scrollable
- the "mask" stays at the top
- the "mask" doesn't overlap the scrollbar
How can I solve this?
.scrollable
position: absolute;
width: 300px;
height: 200px;
padding: 40px 0;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>.scrollable
position: absolute;
width: 300px;
height: 200px;
padding: 40px 0;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div> .scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div> .scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>html css html5 css3
html css html5 css3
asked yesterday
lampshadelampshade
5601332
asked yesterday
lampshadelampshade
5601332
asked yesterday
lampshadelampshade
5601332
asked yesterday
lampshadelampshade
5601332
asked yesterday
lampshadelampshade
5601332
5601332
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
You could use calc() to substract the width of the scrollbar from the overlay:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: calc(100% - 18px);
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered yesterday
aMJayaMJay
1,58641323
I thought about that too, but is the width of the scrollbar consistent across all browsers?
– lampshade
yesterday
I don't think that's the case, but firefox allows you to control width of the scrollbar, more here - developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
– aMJay
yesterday
add a comment |
0
You can use a radial-gradient instead. That way the corners won't overlap the scroll and the effect looks very nice.
body
margin: 0;
padding: 0;
.scrollable
width: 300px;
height: 200px;
max-height:100%;
overflow: auto;
border: 1px solid orange;
section:before
content:"";
display: block;
position: absolute;
width: 300px;
height: 20px;
background-image: radial-gradient(rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0) 80%);
background-position: center -10px;
background-repeat: no-repeat;
<section>
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah</p><p>
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</section>However, if you prefer to use the linear-gradient, you can use $(selector).prop('clientWidth') to get the content available width and apply it to the shade. Remember that that element can't be a :pseudoelement
$('.shade').css('width', function()
var scrollableWidth = $('.content').prop('clientWidth');
return scrollableWidth;
);.scrollable
box-sizing: border-box;
position: absolute;
width: 300px;
height: 200px;
border: 1px solid orange;
.shade
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100%;
padding: 0;
overflow: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable">
<div class="shade"></div>
<div class="content">
<p>Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!</p><p>
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</div>answered yesterday
Daniel AbrilDaniel Abril
1193
add a comment |
0
You could try position sticky. If you use this make sure you're ok with the current browser support. https://caniuse.com/#feat=css-sticky
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: sticky;
display: block;
top: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered 7 hours ago
JRossJRoss
47449
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55280667%2fhow-to-create-a-mask-that-fades-out-scrolled-content-but-does-not-overlap-the-s%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You could use calc() to substract the width of the scrollbar from the overlay:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: calc(100% - 18px);
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered yesterday
aMJayaMJay
1,58641323
I thought about that too, but is the width of the scrollbar consistent across all browsers?
– lampshade
yesterday
I don't think that's the case, but firefox allows you to control width of the scrollbar, more here - developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
– aMJay
yesterday
add a comment |
0
You could use calc() to substract the width of the scrollbar from the overlay:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: calc(100% - 18px);
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered yesterday
aMJayaMJay
1,58641323
I thought about that too, but is the width of the scrollbar consistent across all browsers?
– lampshade
yesterday
I don't think that's the case, but firefox allows you to control width of the scrollbar, more here - developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
– aMJay
yesterday
add a comment |
0
0
0
You could use calc() to substract the width of the scrollbar from the overlay:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: calc(100% - 18px);
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered yesterday
aMJayaMJay
1,58641323
You could use calc() to substract the width of the scrollbar from the overlay:
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: calc(100% - 18px);
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div> .scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: calc(100% - 18px);
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div> .scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
.scrollable:before
content: '';
position: absolute;
width: calc(100% - 18px);
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered yesterday
aMJayaMJay
1,58641323
answered yesterday
aMJayaMJay
1,58641323
answered yesterday
aMJayaMJay
1,58641323
answered yesterday
aMJayaMJay
1,58641323
1,58641323
I thought about that too, but is the width of the scrollbar consistent across all browsers?
– lampshade
yesterday
I don't think that's the case, but firefox allows you to control width of the scrollbar, more here - developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
– aMJay
yesterday
add a comment |
I thought about that too, but is the width of the scrollbar consistent across all browsers?
– lampshade
yesterday
I don't think that's the case, but firefox allows you to control width of the scrollbar, more here - developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
– aMJay
yesterday
I thought about that too, but is the width of the scrollbar consistent across all browsers?
– lampshade
yesterday
I thought about that too, but is the width of the scrollbar consistent across all browsers?
– lampshade
yesterday
I don't think that's the case, but firefox allows you to control width of the scrollbar, more here - developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
– aMJay
yesterday
I don't think that's the case, but firefox allows you to control width of the scrollbar, more here - developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
– aMJay
yesterday
add a comment |
0
You can use a radial-gradient instead. That way the corners won't overlap the scroll and the effect looks very nice.
body
margin: 0;
padding: 0;
.scrollable
width: 300px;
height: 200px;
max-height:100%;
overflow: auto;
border: 1px solid orange;
section:before
content:"";
display: block;
position: absolute;
width: 300px;
height: 20px;
background-image: radial-gradient(rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0) 80%);
background-position: center -10px;
background-repeat: no-repeat;
<section>
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah</p><p>
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</section>However, if you prefer to use the linear-gradient, you can use $(selector).prop('clientWidth') to get the content available width and apply it to the shade. Remember that that element can't be a :pseudoelement
$('.shade').css('width', function()
var scrollableWidth = $('.content').prop('clientWidth');
return scrollableWidth;
);.scrollable
box-sizing: border-box;
position: absolute;
width: 300px;
height: 200px;
border: 1px solid orange;
.shade
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100%;
padding: 0;
overflow: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable">
<div class="shade"></div>
<div class="content">
<p>Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!</p><p>
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</div>answered yesterday
Daniel AbrilDaniel Abril
1193
add a comment |
0
You can use a radial-gradient instead. That way the corners won't overlap the scroll and the effect looks very nice.
body
margin: 0;
padding: 0;
.scrollable
width: 300px;
height: 200px;
max-height:100%;
overflow: auto;
border: 1px solid orange;
section:before
content:"";
display: block;
position: absolute;
width: 300px;
height: 20px;
background-image: radial-gradient(rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0) 80%);
background-position: center -10px;
background-repeat: no-repeat;
<section>
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah</p><p>
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</section>However, if you prefer to use the linear-gradient, you can use $(selector).prop('clientWidth') to get the content available width and apply it to the shade. Remember that that element can't be a :pseudoelement
$('.shade').css('width', function()
var scrollableWidth = $('.content').prop('clientWidth');
return scrollableWidth;
);.scrollable
box-sizing: border-box;
position: absolute;
width: 300px;
height: 200px;
border: 1px solid orange;
.shade
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100%;
padding: 0;
overflow: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable">
<div class="shade"></div>
<div class="content">
<p>Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!</p><p>
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</div>answered yesterday
Daniel AbrilDaniel Abril
1193
add a comment |
0
0
0
You can use a radial-gradient instead. That way the corners won't overlap the scroll and the effect looks very nice.
body
margin: 0;
padding: 0;
.scrollable
width: 300px;
height: 200px;
max-height:100%;
overflow: auto;
border: 1px solid orange;
section:before
content:"";
display: block;
position: absolute;
width: 300px;
height: 20px;
background-image: radial-gradient(rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0) 80%);
background-position: center -10px;
background-repeat: no-repeat;
<section>
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah</p><p>
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</section>However, if you prefer to use the linear-gradient, you can use $(selector).prop('clientWidth') to get the content available width and apply it to the shade. Remember that that element can't be a :pseudoelement
$('.shade').css('width', function()
var scrollableWidth = $('.content').prop('clientWidth');
return scrollableWidth;
);.scrollable
box-sizing: border-box;
position: absolute;
width: 300px;
height: 200px;
border: 1px solid orange;
.shade
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100%;
padding: 0;
overflow: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable">
<div class="shade"></div>
<div class="content">
<p>Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!</p><p>
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</div>answered yesterday
Daniel AbrilDaniel Abril
1193
You can use a radial-gradient instead. That way the corners won't overlap the scroll and the effect looks very nice.
body
margin: 0;
padding: 0;
.scrollable
width: 300px;
height: 200px;
max-height:100%;
overflow: auto;
border: 1px solid orange;
section:before
content:"";
display: block;
position: absolute;
width: 300px;
height: 20px;
background-image: radial-gradient(rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0) 80%);
background-position: center -10px;
background-repeat: no-repeat;
<section>
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah</p><p>
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</section>However, if you prefer to use the linear-gradient, you can use $(selector).prop('clientWidth') to get the content available width and apply it to the shade. Remember that that element can't be a :pseudoelement
$('.shade').css('width', function()
var scrollableWidth = $('.content').prop('clientWidth');
return scrollableWidth;
);.scrollable
box-sizing: border-box;
position: absolute;
width: 300px;
height: 200px;
border: 1px solid orange;
.shade
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100%;
padding: 0;
overflow: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable">
<div class="shade"></div>
<div class="content">
<p>Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!</p><p>
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</div>body
margin: 0;
padding: 0;
.scrollable
width: 300px;
height: 200px;
max-height:100%;
overflow: auto;
border: 1px solid orange;
section:before
content:"";
display: block;
position: absolute;
width: 300px;
height: 20px;
background-image: radial-gradient(rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0) 80%);
background-position: center -10px;
background-repeat: no-repeat;
<section>
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah</p><p>
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</section>body
margin: 0;
padding: 0;
.scrollable
width: 300px;
height: 200px;
max-height:100%;
overflow: auto;
border: 1px solid orange;
section:before
content:"";
display: block;
position: absolute;
width: 300px;
height: 20px;
background-image: radial-gradient(rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0) 80%);
background-position: center -10px;
background-repeat: no-repeat;
<section>
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah</p><p>
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo!</p><p>Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</section>$('.shade').css('width', function()
var scrollableWidth = $('.content').prop('clientWidth');
return scrollableWidth;
);.scrollable
box-sizing: border-box;
position: absolute;
width: 300px;
height: 200px;
border: 1px solid orange;
.shade
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100%;
padding: 0;
overflow: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable">
<div class="shade"></div>
<div class="content">
<p>Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!</p><p>
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</div>$('.shade').css('width', function()
var scrollableWidth = $('.content').prop('clientWidth');
return scrollableWidth;
);.scrollable
box-sizing: border-box;
position: absolute;
width: 300px;
height: 200px;
border: 1px solid orange;
.shade
content: '';
position: absolute;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
.content
width: 100%;
height: 100%;
padding: 0;
overflow: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable">
<div class="shade"></div>
<div class="content">
<p>Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!</p><p>
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
</div>answered yesterday
Daniel AbrilDaniel Abril
1193
edited yesterday
answered yesterday
Daniel AbrilDaniel Abril
1193
answered yesterday
Daniel AbrilDaniel Abril
1193
answered yesterday
Daniel AbrilDaniel Abril
1193
1193
add a comment |
add a comment |
0
You could try position sticky. If you use this make sure you're ok with the current browser support. https://caniuse.com/#feat=css-sticky
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: sticky;
display: block;
top: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered 7 hours ago
JRossJRoss
47449
add a comment |
0
You could try position sticky. If you use this make sure you're ok with the current browser support. https://caniuse.com/#feat=css-sticky
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: sticky;
display: block;
top: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered 7 hours ago
JRossJRoss
47449
add a comment |
0
0
0
You could try position sticky. If you use this make sure you're ok with the current browser support. https://caniuse.com/#feat=css-sticky
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: sticky;
display: block;
top: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered 7 hours ago
JRossJRoss
47449
You could try position sticky. If you use this make sure you're ok with the current browser support. https://caniuse.com/#feat=css-sticky
.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: sticky;
display: block;
top: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: sticky;
display: block;
top: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>.scrollable
position: absolute;
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid orange;
.scrollable:before
content: '';
position: sticky;
display: block;
top: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>answered 7 hours ago
JRossJRoss
47449
answered 7 hours ago
JRossJRoss
47449
answered 7 hours ago
JRossJRoss
47449
answered 7 hours ago
JRossJRoss
47449
47449
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55280667%2fhow-to-create-a-mask-that-fades-out-scrolled-content-but-does-not-overlap-the-s%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
