CODEWITHSUNDEEP
htmlcsspadding
Adam Freymiller
Adam Freymiller

Reputation: 1939

Adding Bottom Padding to last visible element with div with overflow-y property

I am working on a div which contains a list which overflows with the overflow-y property set to "scroll". I'm trying to add padding to the bottom of what's visible within the scroll area such that the last visible list item in the div has bottom padding, but the padding is only applied at the end of the entire list itself after scrolling is complete, instead of the last currently visible list item. How can I add padding to the last currently visible list item in the div?

Expectation: 
_____________
| * item 1   |  
| * item 2   |
| * item 3   |
|____________| <-- extra padding beyond last visible element (remaining list items 
cannot be seen until you scroll lower)

Actual:
_____________
| * item 1   |  
| * item 2   |
| * item 3   |
|_* item 4 __| <-- extra padding is only added at the end of the entire 
scrolled list

Code: https://codepen.io/afreymiller/pen/BYVByy

Upvotes: 2

Views: 1000

Answers (1)

zer00ne
zer00ne

Reputation: 44078

As TNG commented below the original answer does not answer the question. The following update does. To recap the OP question:

"How can I add padding to the last currently visible list item in the div?"

So this implies that the visible portion of the list varies in height. To change the styles based on it's visibility and/or scroll position requires JavaScript/jQuery. The following demo is a pure CSS/HTML solution that uses position, z-index, an <frame>, and a sibling <div>.

The <iframe> has srcdoc attribute with the <ul> as it's value. The <iframe> (.list) and the container (.box) should have the same height.

Demo

.box {
  position: relative;
  height: 100px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
  overflow:hidden
}

.list {
  display: block;
  position: absolute;
  z-index: 0;
  height: 100px;
  width: 300px;
}

.mask {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 15px;
  width: calc(100% - 12px);
  background: #fff;
}
  
.show { 
  outline: 1px dashed red;
}

.tall {
  height:125px
}
<p>.mask is outlined to show it's location</p>
<section class='box'>
<iframe class='list' srcdoc='<ul style="height: 105px;padding:0px 0 45px 0"><li style="height: 20px;padding-bottom: 5px">Pizza</li>  <li style="height: 20px;padding-bottom: 5px">Spinach</li><li style="height: 20px;padding-bottom: 5px">Lettuce</li><li style="height: 20px;padding-bottom: 5px">Burito</li><li style="height: 20px;padding-bottom: 5px">Spaghetti</li><li style="height: 20px;padding-bottom: 5px">Meatballs</li></ul>' scrolling='yes'></iframe>
<div class='mask show'>&nbsp;</div>
</section>
<p>.mask not outlined</p>
<section class='box'>
<iframe class='list' srcdoc='<ul style="height: 105px;padding:0px 0 45px 0"><li style="height: 20px;padding-bottom: 5px">Pizza</li>  <li style="height: 20px;padding-bottom: 5px">Spinach</li><li style="height: 20px;padding-bottom: 5px">Lettuce</li><li style="height: 20px;padding-bottom: 5px">Pepper</li><li style="height: 20px;padding-bottom: 5px">Spaghetti</li><li style="height: 20px;padding-bottom: 5px">Meatballs</li></ul>' scrolling='yes'></iframe>
<div class='mask'>&nbsp;</div>
</section>
<p>.box, and .list height increases</p>
<section class='box tall'>
<iframe class='list tall' srcdoc='<ul style="height: 105px;padding:0px 0 45px 0"><li style="height: 20px;padding-bottom: 5px">Pizza</li>  <li style="height: 20px;padding-bottom: 5px">Spinach</li><li style="height: 20px;padding-bottom: 5px">Lettuce</li><li style="height: 20px;padding-bottom: 5px">Liver</li><li style="height: 20px;padding-bottom: 5px">Spaghetti</li><li style="height: 20px;padding-bottom: 5px">Meatballs</li></ul>' scrolling='yes'></iframe>
<div class='mask'>&nbsp;</div>
</section>

Upvotes: 1

Related Questions