当元素进入视口时,在离开视口之前水平滚动其整个内容

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)但由于屏幕的宽度也与容器相同width 并且我们已经平移了容器，此时90%我们只能到达translate(-100%) （我们可以为最后一个元素添加负边距来纠正位置）。

我们只需要将差值 ( top - window.innerHeight) 转换为百分比值（考虑window.innerHeight为100%(when 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>