Как скрывать элемент по условию скролла?

Question

[kot98]

Есть попап, внизу которого есть псевдоэлемент с градиентом. При скролле этого попапа до конца (нижней границы) псевдоэлемент должен пропадать.

.popup {
  position: relative;
  width: 100%;
  height: 100vh;
  &::before {
      display: block;
      position: absolute;
      content: '';
      background: linear-gradient(0deg, #FFFFFF 9.15%, rgba(255, 255, 255, 0) 100%);
      width: 100%;
      height: 200px;
      right: 0;
      bottom: 0;
  }
}

Как этого можно добиться?

Answer 1

[Сергей delphinpro]

https://learn.javascript.ru/onscroll
https://learn.javascript.ru/size-and-scroll

Answer 2

[gogowq]

const popup = document.querySelector('.popup');
const pseudoElement = popup.querySelector('::before');
popup.addEventListener('scroll', function() {
  if (popup.scrollHeight - popup.scrollTop === popup.clientHeight) {
    pseudoElement.style.display = 'none';
  } else {
    pseudoElement.style.display = 'block';
  }
});