具有水平滚动的多个粘性部分

Question

我正在尝试制作一个带有多个粘性部分和水平滚动的页面（因此，当您像平常一样垂直滚动时，您必须通过水平画廊进行滚动）

我参考了这个代码示例 (https://codepen.io/johnhubler/pen/RwoPRBG)，因为我的JS知识非常差。 但是，正如您在代码示例中所看到的那样，它只在第一个粘性部分中起作用，而第二个部分则保持不动。

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个相同的固定部分，因此我想知道如何使它在所有这些部分中正常工作。如果有更好的替代资源（如果可能的话是纯JS或非常易于理解的），请告诉我。

谢谢

- user11136133

Answer 1

我已经优化并制作出了你的代码的工作版本。

这个数组列出了包装元素的类。这样，您只需将新类添加到数组中，就可以添加任意数量的图库。

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

Example:

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>

- 54ka

---

“优化”似乎有些牵强，特别是当目标部分的数量增加时。在每次滚动事件（非常频繁触发且经常建议进行节流）上迭代每个部分，尤其是当一次只能看到一个部分时，会成为性能瓶颈。 - snazzybouche