Горизонтальная прокрутка липкого участка с локомотивной прокруткой - PullRequest
Новая
       26

Горизонтальная прокрутка липкого участка с локомотивной прокруткой

2 голосов
/ 06 февраля 2020

Глядя, чтобы создать горизонтальную секцию прокрутки внутри закрепленного элемента со следующей структурой, используя рамку прокрутки локомотива (https://github.com/locomotivemtl/locomotive-scroll). Мой HTML выглядит следующим образом: 

<div id="sec01" class="the-height-400vh-section"><!-- this has the same height as does the 400vh width, timing should match -->
    <div class="the-sticky-div" id="sticky"  data-scroll data-scroll-sticky data-scroll-target="#sec01"><!-- this is stickying to viewport while we scroll -->
        <div class="the-overflow-hidden-mask">
            <div class="the-width-400vh-scrollable-div" data-scroll data-scroll-direction="horizontal" data-scroll-speed="12" data-scroll-target="#sec01"><!-- we're scrolling this 400vh to the right while we're scrolling the 400vh height of the parent -->
                <div class="the-content">
                    <div class="a-block"></div>
                    <div class="a-block"></div>
                    <div class="a-block"></div>
                    <div class="a-block"></div>  
                </div>
            </div>
        </div>
    </div>
</div>

И применяется следующее CSS: 

.the-sticky-div {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background: #ccc;
  z-index: 1;
}
.the-overflow-hidden-mask {
  position: relative;
  z-index: 200;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #000;
}
.the-height-400vh-section {
  position: relative;
  display: flex;
  height: 400vh;
  margin-left: 0px;
  justify-content: center;
  align-items: center;
  border-top: 60px none rgba(36, 36, 36, 0.09);
  background-color: #fff;
}

.the-width-400vh-scrollable-div {
  display: flex;
  width: 400vh;
  position:relative;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  will-change: transform;
}
.the-content {
  display: flex;
  width: 100%;
  height: 100%;
  padding-bottom: 10vh;
  justify-content: flex-start;
  align-items: flex-end;
  .a-block {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    left:0;
    margin-right: 40px;
    margin-left: 40px;
    flex: 0 0 auto;
    border-radius: 6px;
    background-color: hsla(0, 0%, 87.1%, 0.72);
    box-shadow: 0 0 100px 8px rgba(205, 43, 177, 0.25);
  }
}

Логика c за этим должна быть следующей:

enter image description here

Но у меня есть две основные проблемы:

  • горизонтальная прокрутка инициализируется слишком рано

  • горизонтальное содержимое скользит справа и не находится в исходном положении для начала прокрутки.

Любые идеи, которые можно сделать с текущим решение для достижения конечного результата, аналогичного, например, www.reformcollective.com (разделы входят в экран, прокрутка начинается, прокрутка заканчивается при просмотре последнего раздела).

Заранее спасибо

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Я работал над тем же самым для проекта.

Смещение, похоже, вызвано скоростью прокрутки данных. Чем выше скорость, тем больше смещение справа от экрана.

В настоящее время я экспериментирую с data-scroll-position = "top" для "the-width-400vh-scrollable-div" class в вашем примере.

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

Возможно, это даст вам некоторые идеи, если вы еще не решили его. Если вы все поняли, пожалуйста, поделитесь своим решением. Это было бы чрезвычайно полезно для меня и других, я уверен!

1 голос
/ 11 марта 2020

Вам не нужен локомотивный свиток, просто 20 линий ванили JS.

Вам нужны три контейнера, которые мы можем обозначить как

  1. space holder - этот контейнер будет поддерживать пространство вертикальной прокрутки пространства. Подробнее об этом ниже.
  2. sticky - этот контейнер будет иметь заданную высоту (100vh в моем примере). Он также будет position: sticky; top: 0;.
  3. горизонтальный - этот контейнер будет содержать содержимое, на которое вы будете sh перемещаться по горизонтали. Его ширина будет определяться содержимым, которое он содержит.

Для достижения желаемого эффекта вы должны установить высоту "space holder" равной ширине "горизонтального". Затем на свитке вы должны горизонтально перевести «горизонтальный», равный смещенной вершине «липкого».

Проверьте мой ответ на аналогичный вопрос здесь .

...