ScrollHeight дает противоречивые результаты
У меня возникла идея использовать пагинацию сверху-вниз. Мой план заключался в использовании класса hidden на нижнем элементе пагинации, если ListView вписывается в область просмотра пользователя.
Работало отлично, но случайно я обнаружил, что один раз из +/- двадцати раз оно просто не работает. Используя журнал консоли, я заметил, что scrollHeight дает непоследовательные результаты, а viewportHeight, напротив, работает как шарм каждый раз.
Шаблон Django:
<!doctype html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'styles/elements.css' %}"/>
<link rel="stylesheet" href="{% static 'styles/main.css' %}"/>
<script defer src="https://unpkg.com/phosphor-icons"></script>
<script defer src="{% static 'js/project-list.js' %}"></script>
<title>Browse Projects</title>
</head>
JS файл:
'use strict';
const tagFilterForm = document.getElementsByClassName('tag-filter-form')[0];
const paginatorLinks = document.getElementsByClassName('paginator-link');
const paginatorBottom = document.getElementsByClassName('paginator--bottom')[0];
// Prevent from wiping filters during page change:
if (tagFilterForm) {
for (let i = 0; i < paginatorLinks.length; i++) {
paginatorLinks[i].addEventListener('click', function (e) {
e.preventDefault()
console.log('clicked')
const pageNumber = this.dataset.page
tagFilterForm.innerHTML += `<input value="${pageNumber}" name="page" hidden>`
tagFilterForm.submit()
});
}
}
// Add bottom paginator if doc height > viewport height:
const documentHeight = document.documentElement.scrollHeight;
const viewportHeight = window.innerHeight;
console.log(documentHeight, viewportHeight)
if (documentHeight > viewportHeight) {
paginatorBottom.classList.remove('hidden');
}
P.S. Когда он не работает, он показывает то же самое ошибочное значение, также я пробовал использовать различные атрибуты, такие как offsetHeight.