0

i have a list which has overflow-y: scroll property and a lot of items inside id.

I want to add opacity to last visible element in case we are not at the bottom of that list.

For example i have 100 elements and i see elements at index 5-10 (others are not visible) -> I want to add opacity to 10th element.

How can i achieve this?

Dawid Kwiatoń
  • 157
  • 2
  • 13
  • use css `nth:child` – full-stack Dec 28 '20 at 20:31
  • This is a great question. I suggest creating a small jsfiddle so that everyone can play with their suggested answers and you can make sure it works. This looks very similar to this question : https://stackoverflow.com/questions/5275098/a-css-selector-to-get-last-visible-div – snowcode Dec 28 '20 at 21:00

2 Answers2

1

I've provided an example that solves what you're looking for.

A few notes

  • This uses a gradient instead of a translucent overlay as this gives it less of a linear scroll effect
    • If you still want to implement this translucent filter, I recommend using the scroll-snap CSS property that @tacoshy suggested.
  • I used the opacity property but this can easily be recreated using just the rgba property (again, going off of @tacoshy's comment)
  • The overlay only disappears when the user has finished scrolling as opposed to while they're scrolling (this has performance benefits)
  • The gradient overlays the scrollbar but this is fixable using the -webkit-scrollbar pseudo-selector.

const list = document.querySelector('ul')

list.addEventListener('scroll', (event) => {
  if(list.scrollHeight - list.scrollTop == list.offsetHeight) {
    document.querySelector('.overlay').style.opacity = 0;
  } else {
    document.querySelector('.overlay').style.opacity = 0.75;
  }
})
* {
  margin: 0;
  padding: 0;
}
.scroll-container {
  position: relative;
  height: 100px;
  border: 1px solid black;
  width: 200px;
}
.overlay {
  background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
  opacity: 0.75;
  position: absolute;
  bottom: 0;
  height: 20px;
  pointer-events: none;
  right: 0;
  left: 0;
}
ul {
  overflow-y: scroll;
  height: 100%;
}
<div class="scroll-container">
    <div class="overlay"></div>
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
Raheel Junaid
  • 577
  • 3
  • 12
0

You cannot achieve it with just a few lines of code :)

  • Add an opaque layer (with absolute position) at the bottom of the list.
  • Listen to the scroll event of the list element and if it reaches its end, hide the opaque layer. Otherwise, it will be visible, staying on the bottom of the list.
Thunderbolt Engineer
  • 1,524
  • 7
  • 12
  • I highly recommend to use `transparency/RGBa` or `filter: blur;` istead of opacity which has it whole different variaty of issues as it is rendered last. Also should be combined with a `scroll-snap`. Alternativly it could be doable with `nth-child` and minor scripting. – tacoshy Dec 28 '20 at 17:57