Блог

РЕДАКТИРОВАТЬ: Смущающе, я изначально видел эту проблему в Chrome, но проблема заключалась в том, что я был немного уменьшен в браузере, вызывая субпиксельный размер элемента. Если элементы имеют полную высоту в пикселях, все работает нормально. Тем не менее, я считаю, что это все еще проблема, поскольку Firefox, похоже, отображает подпиксельные элементы иначе, чем Chrome, а также мы должны поддерживать масштабирование.

Я пытаюсь реализовать кроссбраузерную привязку прокрутки, чтобы при добавлении нового элемента в контейнер переполнения и прокрутке пользователя вверх позиция не перемещалась.

У меня есть тестовый код здесь: https://codepen.io/djdmorrison/pen/YzpwvWx

Я ограничиваю контейнер 50 элементами, добавляя новый каждые 250 мс и одновременно удаляя самый старый. Когда пользователь прокручивается на полпути в контейнере, я хочу, чтобы элементы оставались неподвижными.

Я делаю это, получая container.scrollTop и container.scrollHeight перед добавлением нового элемента. Затем я добавляю элемент, container.scrollHeight снова беру и вычисляю разницу в высоте прокрутки (чтобы вычислить разницу в высотах добавленного нового элемента и удаленного старого). Затем я устанавливаю container.scrollTop значение предыдущего scrollTop минус высота новых элементов ( поле) плюс разница в высотах прокрутки: container.scrollTop = beforeScrollTop - (newEl.offsetHeight margin) diffScrollHeight;

Кажется, это почти решение, но есть очень небольшое подергивание, особенно в firefox.

Чего мне не хватает?