水平滚动的多个粘性部分

Question

我正在尝试制作一个包含多个水平滚动条的粘性部分的页面（因此当您像往常一样垂直滚动时，您将被迫浏览水平画廊）

我引用这个代码笔 (https://codepen.io/johnhubler/pen/RwoPRBG) 因为我的 JS 知识很差。但是，正如您在 codepen 中看到的那样，它只在第一个粘性部分起作用，而第二个粘性部分保持静止。

var windowWidth = window.innerWidth;

var horLength = document.querySelector(".element-wrapper").scrollWidth;
var horLength2 = document.querySelector(".element-wrapper2").scrollWidth;

var distFromTop = document.querySelector(".horizontal-section").offsetTop;
var distFromTop2 = document.querySelector(".horizontal-section2").offsetTop;

var scrollDistance = distFromTop + horLength - windowWidth;
var scrollDistance2 = distFromTop2 + horLength2 - windowWidth;

document.querySelector(".horizontal-section").style.height = horLength + "px";

document.querySelector(".horizontal-section2").style.height = horLength2 + "px";

window.onscroll = function(){
  var scrollTop = window.pageYOffset;
  
  if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
    document.querySelector(".element-wrapper").style.transform = "translateX(-"+(scrollTop - distFromTop)+"px)";
  }
  
  if (scrollTop >= distFromTop2 && scrollTop <= scrollDistance2) {
    document.querySelector(".element-wrapper2").style.transform = "translateX(-"+(scrollTop - distFromTop2)+"px)";
  }
}

我打算添加大约 4 个相同的粘性部分，所以我想知道如何让它在所有粘性部分中都起作用。如果有更好的alternative/resource/etc。（如果可能，vanilla JS 或其他非常容易理解的东西）请告诉我。

谢谢

Answer 1

我对你的代码做了一个优化的工作版本。

这个数组列出了 class 个包装元素。通过这种方式，您只需向数组中添加一个新的 class 即可添加任意数量的画廊。

var array = ['.horizontal-section', '.horizontal-section2'];

示例：

var array = ['.horizontal-section', '.horizontal-section2'];

window.onscroll = function () {

    var windowWidth = window.innerWidth;
    var scrollTop = window.pageYOffset;

    array.forEach(el => {
        var wrap = document.querySelector(el);
        var elWrap = wrap.querySelector(".element-wrapper");

        var horLength = elWrap.scrollWidth;
        var distFromTop = wrap.offsetTop;

        var scrollDistance = distFromTop + horLength - windowWidth;

        wrap.style.height = horLength + "px";

        if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
            elWrap.style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
        }
    });

}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
}

.bumper {
    width: 100%;
    height: 1800px;
    background-color: #f3f3f3;
}

.horizontal-section,
.horizontal-section2 {
    padding: 100px 0;
    background-color: pink;
}

.sticky-wrapper,
.sticky-wrapper2 {
    position: sticky;
    top: 100px;
    width: 100%;
    overflow: hidden;
}

.element-wrapper,
.element-wrapper2 {
    position: relative;
    display: flex;
}

.element {
    width: 500px;
    height: 400px;
    background-color: purple;
    margin: 0 20px 0 0;
    flex-shrink: 0;
}

<div class="bumper"></div>

<div class="horizontal-section">
    <div class="sticky-wrapper">
        <div class="element-wrapper">
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
        </div>
    </div>
</div>

<div class="bumper"></div>

<div class="horizontal-section2">
    <div class="sticky-wrapper">
        <div class="element-wrapper">
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
        </div>
    </div>
</div>

<div class="bumper"></div>

水平滚动的多个粘性部分

Multiple sticky sections with horizontal scrolling

html

javascript

css

sticky

horizontal-scrolling