Как узнать, прокручена ли до конца полоса прокрутки?

Question

Нужно узнать, до конца ли прокручен блок. Понятия не имею, как это можно сделать.

Answer 1

elem.scrollHeight — высота всего содержимого, в том числе и за пределами скролла,
elem.scrollTop — сколько уже прокрутили,
elem.clientHeight — внутренняя высота блока, с учетом padding, без учета рамок.

document.querySelector(".bubu").addEventListener("scroll", function() {
  console.clear();
  
  console.log(
    "↓↑ end:", this.scrollHeight === this.scrollTop + this.clientHeight,

    this.scrollHeight, this.scrollTop, this.clientHeight
  );
    
  console.log(
    "←→ end:", this.scrollWidth === this.scrollLeft + this.clientWidth,

    this.scrollWidth, this.scrollLeft, this.clientWidth
  );
});

.bubu {
  width: 200px;
  height: 140px;
  overflow: auto;
}

.content {
  width: 400px;
  height: 900px;
  background-image:
    repeating-linear-gradient(to right, #a22 0 20px, transparent 20px 40px),
    repeating-linear-gradient(#a22 0 20px, #fea 20px 40px);
}

<div class="bubu">
  <div class="content"></div>
</div>

БЛОГ НА HUSL

Как узнать, прокручена ли до конца полоса прокрутки?

Ответы (1 шт):