Почему мой текст не выравнивается при горизонтальной прокрутке по кратности window.innerWidth?

Question

Я пытаюсь воссоздать Monocle ereader . Насколько я понимаю, он работает, колонируя страницу, а затем прокручивая ее по горизонтали.

У меня есть следующие HTML и Javascript:

body {
  column-width: 100vw;
  max-height: calc(100vh - 30px);
  box-sizing: border-box;
}

window.addEventListener(
  'wheel',
  (evt) => {
    const delta = evt.deltaX + evt.deltaY
    const pages = Math.round(Math.abs(delta) / delta)
    const curr = Math.round(window.scrollX / window.innerWidth)
    window.scroll((curr + pages) * window.innerWidth, 0)
  }
)

Как это перо показывает, что при прокрутке по мере продвижения страниц текст смещается влево.

Answer 1

Похоже, что он дрейфует из-за вертикальной полосы прокрутки справа. Для меня добавление overflow-y: hidden; к телу css, чтобы скрыть полосу прокрутки, похоже, помогло.

Если вам нужна полоса прокрутки, вам может потребоваться вычислить ширину полосы прокрутки и сложить / вычесть это компенсировать. Более подробную информацию об этом можно получить здесь: { ссылка }

Answer 2

Плохой браузер должен перерисовывать каждый случай события «колесо»! Попробуйте войти в консоль для каждого события колеса, вы увидите, что это довольно часто! Попробуйте уменьшить количество раз, которое браузер должен перерисовать. Это будет баланс между плавной прокруткой и лучшей производительностью:

let counter = 0;
const buffer = 3;  // I made this a variable so you can easily see what it is and change it
window.addEventListener(
  'wheel',
  (evt) => {
    const delta = evt.deltaX + evt.deltaY
    const pages = Math.round(Math.abs(delta) / delta)
    const curr = Math.round(window.scrollX / window.innerWidth)
    let scrollAmount = (curr + pages) * window.innerWidth
      if (scrollAmount >= (counter + buffer)) {
        window.scroll(scrollAmount, 0)
        counter = scrollAmount
      }
  }
)