Несколько полос прокрутки на одной странице

Question

Я заинтересован в том, чтобы на одной странице было несколько полос прокрутки.... видел пару примеров, в основном в интернет-магазинах, таких как www.jrew и www.indumenti.se, есть ли у кого-нибудь какие-либо идеи по поводу лучшего способа структурирования Java? скрипт? Я также хочу синхронизировать полосы прокрутки, в идеале с той же скоростью.

Answer 1

Вы можете сделать любой контейнер с прокруткой с overflow: scroll или же overflow-y: scroll, Общий подход заключается в том, чтобы зафиксировать высоту этих контейнеров, чтобы они прокручивались. Например

.scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* enables momentum-scrolling on iOS */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Чтобы разделить виды прокрутки на несколько контейнеров, вы должны создать, например, сетку, как обычно, и поместить вложенный элемент прокрутки внутри. например

<div class="row row-6">
    <div class="scroll">
        your left content
    </div>
</div>

<div class="row row-6">
    <div class="scroll">
        your right content
    </div>
</div>

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

Обратите внимание, что элемент прокрутки будет привязан к размерам своего контейнера. Таким образом, столбец сетки должен быть растянут до нижней части страницы, используя высоту 100%, или положение фиксированное или абсолютное.