应用反向滚动后无限滚动

Question

首先，我很抱歉增加了关于反向滚动的问题。我知道那里有很多答案，但经过许多小时的研究和尝试，我仍然无法在我自己的网站上实施此信息。

正如您在标题中看到的，应用反向滚动后我可以无限滚动我的网站，这给我留下了不想要的结果。下面是一个例子，让你好好看看我的问题：

$(document).ready(function () {
  $(window).scroll(function(){
    $('.right').css('transform', 'translate3d(0,' + $(this).scrollTop()*2 + 'px, 0)'); 
  }).scroll();
});

* {
  margin: 0;
  padding: 0;
}
html,body{
  height:100%;
}
.outside {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.left {
  top: calc(100% - 48px);
  position: absolute;
  left: 0px;
  width: calc(50% - 16px);
}
.right{
  bottom: calc(100% - 48px);
  position: absolute;
  right: 0px;
  width: calc(50% - 16px);
}
.shot {
  float: left;
  width: 100%;
  height: 200px;
  background-color: #000;
}
.shot_gap {
  float: left;
  width: 100%;
  height: 48px;
}
.release {
  float: left;
  width: 100%;
  height: calc(100vh - 48px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outside">
  <div class="left">
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="release"></div>
  </div>
  <div class="right">
    <div class="release"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
  </div>
</div>

最初 .shot class 不会设置 height - 我会在里面放一些图片 div - [=15= 的图片数量和尺寸相同] 和 .right div.

无论如何，看这个例子，元素应该在到达与起始位置相似的位置后停止。为了强制执行它，我包含了 .release class。不幸的是，示例中的情况并非如此 - 它有效但是在从 html 中删除 .right class 之后，所以我猜这里的问题是 javascript?

我试图弄乱这个解决方案： Reverse Scrolling 但我没能在我的项目中实现它。

我不指望任何人来解决我的问题。如果有人能指出我正确的方向，那就太好了。例如，让我知道到底哪里出了问题，因为我仍然不确定它是关于 .right class 中的 bottom: calc(100% - 48px) 行还是只是 javascript.

Answer 1

好的，我想我做到了。它有效，但我对我如何实现这一点并不满意。经过研究，我发现必须在 position: fixed 上设置父级，因为如果没有这个，div 元素将在彼此相反的方向上移动，从而使我的页面在滚动时无限长 - 至少是这样我明白这一点。不幸的是，我不能只改变我的 .outside class 的 position，因为那样我将完全失去滚动网站的能力。因此，唯一可行的方法是在 .outside 之上创建新的包装器，并将位置设置为 fixed.

编辑： 位置 fixed 可能只有一个包装器。它要求您获取 .left class 的总高度并将其应用于 .body.

var totalHeight = $(".left").css("height");
$("body").css("height", totalHeight);

编辑结束

这次我使用了一些不同的 js 代码 - 这对我帮助很大：Reverse Scrolling

这是新版本：

$(window).on('scroll',function(){
    $(".right").css('bottom',$(window).scrollTop()*-1);
});

* {
  margin: 0;
  padding: 0;
}
body{
  height:100%;
  width: 100%;
}
.outsideL {
  position: relative;
  width: 100%;
  height: 100%;
}
.outsideR {
  position: fixed;
  width: 100%;
  height: 100%;
}
.left {
  top: 0;
  position: absolute;
  left: 48px;
  width: calc(50% - 64px);
}
.right{
  bottom: 0px;
  position: absolute;
  right: 48px;
  width: calc(50% - 64px);
}
.shot {
  float: left;
  width: 100%;
  height: 400px;
  background-color: #000;
}
.shot_gap {
  float: left;
  width: 100%;
  height: 48px;
}
.release {
  float: left;
  width: 100%;
  height: calc(100vh - 48px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outsideR">
  <div class="right">
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="release"></div>
  </div>
</div>
 
<div class="outsideL">
  <div class="left">
    <div class="release"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="shot_gap"></div>
    <div class="shot"></div>
    <div class="release"></div>
  </div>
</div>

应用反向滚动后无限滚动

Infinite scrolling after applying reverse scrolling

html

javascript

css

reverse

scroll