Как сделать горизонтальный виртуальный скролл?

Question

[Андрей]

Хочу сделать верстку как в книге, в две колонки на большом экране, и в одну колонку на мобильных устройствах.

<div class="reader__container">
    <section class="reader">
      <article>
          <!-- Тут содержимое -->
      </article>
    </section>
  </div>

<style>
.reader__container {
  height: 100%;
  padding: 2rem;
  overflow: hidden;
}

.reader {
  height: 100%;
  column-width: 600px;
  column-gap: 4em;
  column-count: 2;
  column-fill: auto;
}
</style>

Это отлично рендерится и переносится:



Далее я хотел это использовать с transform: translateX(-...), чтобы перелистывать страницы, но тут столкнулся с проблемой, которую не знаю как решить: из-за большого количества нод, слой с контентом получается очень тяжелый ~120мб, и скролл начинает тормозить


Пытался ограничить количество нод, рендерил очередной элемент и проверял, вылазит ли он за контейнер, но в этом случае я не могу посчитать количество страниц книги, потому что не знаю заранее размеры отрендеренных элементов. Может у кого-то есть идеи как это можно сделать?

Comments

[imko]

scroll-snap, но я не уверен можно ли "приклеивать" не каждый элемент а каждую пару/ каждый второй

Answer 1

[Radiks Alijevs]

Привет, тут нужен виртуальный горизонтальный скролл, который будет подгружать страницы, когда они становятся видимы в браузере. Не знаю на чём ты делаешь проект, если например на реакте, то библиотек очень много и сделать проще. Тут, на всякий случай хорошая библиотека для реакт https://tanstack.com/virtual/latest/docs/introduction

Я предполагаю, что ты делаешь на чистом javascript и сделал тебе пример как это работает https://codesandbox.io/p/sandbox/virtual-scroll-ho... Твоя задача, это вставить свой контент в javascript.

Для примера я использую готовый пример виртуального скрола, который можно найти на github https://github.com/tbranyen/hyperlist

Comments

[Андрей]

Использую Vue, просто упростил для примера, про виртуальный скролл я думал, но я не знаю заранее размеры элементов. Заголовки, параграфы, изображения - все это отдельные компоненты (на скриншотах в вопросе). + задача осложняется отображением колонками.

P.S. посмотрел API у TanStack, вроде можно задать даже колонки, спасибо попробую

[Radiks Alijevs]

Да, в TanStack можно задать параметры, чтобы размеры высчитывались автоматически. Это можно найти в примерах dynamic https://tanstack.com/virtual/latest/docs/framework...