Проверьте, прокрутил ли пользователь до дна в эпоху субпиксельной точности

Question

Я обнаружил, что классическая MDN формула для проверки прокрутки содержимого до конца

element.scrollHeight - element.scrollTop === element.clientHeight

больше не работает для всех случаев .Например, если вы измените масштаб контента на 100% для демонстрационной страницы на MDN , вы не получите правильный результат.Это происходит потому, что теперь браузеры используют субпиксельная точность для элементов.В частности, scrollTop для не 100% шкалы теперь является дробным значением.На самом деле проблема возникает из-за знака === в формуле выше.

Таким образом, требуется самое простое, но все же надежное решение.

Answer 1

Мое текущее решение:

function isContentScrolledToBottom(element) {
    const rest = element.scrollHeight - element.scrollTop;
    return Math.abs(element.clientHeight - rest) < 1;
}

Проверяет, прокручивается ли элемент до дна с точностью ± 1.