具有水平滾動的多個粘性部分

我正在嘗試使用水平滾動制作具有多個粘性部分的頁面（因此，當您像往常一樣垂直滾動時，您將被迫通過水平畫廊）

我參考這個 codepen ( 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 個相同的粘性部分，所以我想知道如何讓它在所有這些部分中都起作用。如果有更好的替代品/資源/等（如果可能的話，vanilla JS 或一些很容易理解的東西）請告訴我。

謝謝

uj5u.com熱心網友回復：

我制作了您代碼的優化和作業版本。

該陣列列出了包裝元素的類別。通過這種方式，您可以通過簡單地向陣列添加一個新類來添加任意數量的畫廊。

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>

標籤：javascript html css 黏 水平滚动

上一篇：如何使用jquery或javascript從asp.netcoremvc的下拉串列中自動選擇值？

下一篇：是否可以使具有兩個型別引數的泛型方法僅推斷其中一個？