Horizontal scrolling sticky section with Locomotive scroll

Question

Looking to create a horizontal scrolling section inside a sticky div with the following structure using Locomotive scroll framework (https://github.com/locomotivemtl/locomotive-scroll). My HTML is as follows:

<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>

And the following CSS is applied:

.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);
  }
}

The logic behind this should be as follows:

But I have two main issues:

• the horizontal scroll initialises too early

• the horizontal content slides in from right and is not in the initial position to start scrolling.

Any ideas what could be done with the current solution to achieve a similar end result to i.e www.reformcollective.com (sections enter screen, scrolling starts, scrolling ends when last section is viewed).

Thanks in advance

Answer 1

You do not need Locomotive Scroll just 20 lines of vanilla JS.

You need three containers which we can refer to as:

1. space holder - This container will maintain the vertical space scroll space. More on this below.
2. sticky - This container will have a set height (100vh in my example). It will also be position: sticky; top: 0;.
3. horizontal - This container will contain the content that you wish to horizontally scroll on. Its width will be determined by the content that it contains.

To achieve the desired effect you must set the height of "space holder" to the width of "horizontal". Then on scroll you must horizontally translate "horizontal" equal to the offset top of "sticky".

Check out my answer to a similar question here.

Answer 2

I have been working on exactly the same thing for a project.

The offset seems to be caused by the data-scroll-speed. The higher the speed the more offset it is off to the right of the screen.

I am currently experimenting with data-scroll-position="top" on the "the-width-400vh-scrollable-div" class in your example.

This approach has the horizontal scrolling div start in the correct position but it immediately starts scrolling from the top of the screen. So therefore only works if your horizontal scrolling div is at the top and not placed further down the page.

Perhaps this will give you some ideas if you haven't solved it already. If you did figure it out please share your solution. This would be extremely helpful to me and others I'm sure!