當元素進入視口時，在離開視口之前水平滾動其整個內容

Question

我有一個水平滾動元素，包含位於頁面下方的圖像。

首先，我有以下標記和樣式。 我使用overflow:hidden因為我不想要滾動條。 為簡單起見，我還刪除了一些不太重要的樣式：

<ul id="players-horizontal">
    <li class="player-box"><img src="..."></li>
    <li class="player-box"><img src="..."></li>
    ...
</ul>

#players-horizontal {
    overflow: hidden;
    height: 340px;
    width: 100%;
}

#players-horizontal .player-box {
    display: inline-block;
    width: 300px;
    height: 340px;
}

#players-horizontal .player-box:first-child {
    margin-left: 90%;
}

這給了我以下觀點：

當這個元素滾動到視圖中時，我想水平滾動它的整個內容，直到它即將離開視圖，這樣用戶可以在向下滾動的同時看到它的全部內容。

元素即將離開視口時所需的外觀如下：

反之亦然，當用戶向上滾動時，應該發生相反的操作。

要知道元素何時進入視口，我使用了Waypoints插件：

var waypoints = $('#players-horizontal').waypoint(
    function(direction) {
        if (direction === 'down') {
            //console.log("Into view");
            $window.scroll(function () {
                var s = $(this).scrollTop();

            });
        } else {
            //console.log("Out of view");
            $window.scroll(function () {
                var s = $(this).scrollTop();

            });
        }
    }, { offset: '90%' }
);

但是我不知道接下來該做什么，更具體地說，如何計算在離開視口之前在短時間內滾動（改變邊距）元素的數量，確保它內部的所有元素都顯示在之前它確實。

我很感激對終點線的幫助。 我不希望工作代碼，雖然我很感激，但我真的需要一個易於理解的解釋。

更新：

我剛剛嘗試使用一種替代方法，該方法不使用Waypoints插件，而是使用ScrollMagic 。 這肯定解除了許多所需的工作。

var scene = new ScrollMagic.Scene({triggerElement: "#players-horizontal", duration: 200})
.addTo(controller)
.on("progress", function (e) {
    console.log((e.progress * 100));
});

上面的片段檢測元素#players-horizontal何時進入和離開視口。

當元素在向下滾動時進入視口底部時，返回的值從0開始，並在離開視口頂部之前停止在100。 當我向上滾動時，值從100開始，當元素即將離開視口底部時停止在0。 所以，我肯定更接近了。

Answer 1

我會以不同的方式思考這一點。 首先，我會考慮使用翻譯來使其更容易處理。 您還需要一些JS代碼來處理這個問題

我將主要容器，我將翻譯90%以獲得您的保證金效果，然后我將其中的內容從0%為100% 。 翻譯將考慮滾動和屏幕高度。 基本上當元素進入屏幕時，我將開始翻譯考慮偏移頂部和屏幕高度之間的差異。

這是第一個例子。

 var h =document.querySelector('#players-horizontal'); document.body.onscroll = function(e) { var offset = h.getBoundingClientRect() var top = offset.top; if(top < window.innerHeight) { h.style.setProperty('--x',(top - window.innerHeight)+'%'); } } 

 body { margin:0; overflow-x:hidden; } .top,.bottom { min-height:150vh; background:yellow; } .container { transform:translateX(90%); } #players-horizontal { white-space:nowrap; margin:0; padding:0; display:inline-block; /*This is important !!*/ transform:translateX(var(--x,0%)); border:5px solid; } #players-horizontal .player-box { display: inline-block; width: 200px; height: 240px; margin:0 10px; background:red; } #players-horizontal .player-box:first-child { background:green; margin-left:0; } #players-horizontal .player-box:last-child { background:blue; margin-right:0; } 

 <div class="top"></div> <div class="container"> <ul id="players-horizontal"> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> </ul> </div> <div class="bottom"></div> 

以上將創建滾動效果，但現在我們需要定義正確的值。

很明顯，我們需要滾動從top = window.innerHeight （ translate(0%) ）開始，當top = 0我們希望我們的元素完全顯示，右邊緣的最后一項，這意味着我們需要translate(-100% + width of screen)但由於translate(-100% + width of screen)的寬度也與容器寬度相同，我們已經將容器翻譯了90%那么我們只能達到translate(-100%) （我們可以添加負邊距）最后一個要素來糾正這個位置） 。

我們只需將差值（ top - window.innerHeight ）轉換為百分比值，將window.innerHeight視為100% （當top=0 ）。

 var h =document.querySelector('#players-horizontal'); document.body.onscroll = function(e) { var offset = h.getBoundingClientRect() var top = offset.top; if(top < window.innerHeight && top >=0) { h.style.setProperty('--x',(top - window.innerHeight)*(100/window.innerHeight)+'%'); } } 

 body { margin:0; overflow-x:hidden; } .top,.bottom { min-height:150vh; background:yellow; } .container { transform:translateX(90%); } #players-horizontal { white-space:nowrap; margin:0; padding:0; display:inline-block; /*This is important !!*/ transform:translateX(var(--x,0%)); border:5px solid; } #players-horizontal .player-box { display: inline-block; width: 200px; height: 240px; margin:0 10px; background:red; vertical-align:top; } #players-horizontal .player-box:first-child { background:green; margin-left:0; } #players-horizontal .player-box:last-child { background:blue; margin-right:-10vw; /*the missing 10%*/ } 

 <div class="top"></div> <div class="container"> <ul id="players-horizontal"> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> </ul> </div> <div class="bottom"></div> 

我已經使用了CSS變量（一個人的偏好），但它並不是強制性的，您只需使用JS代碼設置變換：

 var h =document.querySelector('#players-horizontal'); document.body.onscroll = function(e) { var offset = h.getBoundingClientRect() var top = offset.top; if(top < window.innerHeight && top >=0) { h.style.transform="translateX("+(top - window.innerHeight)*(100/window.innerHeight)+'%)'; } } 

 body { margin:0; overflow-x:hidden; } .top,.bottom { min-height:150vh; background:yellow; } .container { transform:translateX(90%); } #players-horizontal { white-space:nowrap; margin:0; padding:0; display:inline-block; /*This is important !!*/ transform:translateX(0%); border:5px solid; } #players-horizontal .player-box { display: inline-block; width: 200px; height: 240px; margin:0 10px; background:red; vertical-align:top; } #players-horizontal .player-box:first-child { background:green; margin-left:0; } #players-horizontal .player-box:last-child { background:blue; margin-right:-10vw; } 

 <div class="top"></div> <div class="container"> <ul id="players-horizontal"> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> <li class="player-box"></li> </ul> </div> <div class="bottom"></div>