应用反向滚动后无限滚动

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>

Oryginaly .shot 类不会设置 height - 我将在此 div 中放入一些图像 - .left 和 .right div 的图像数量和尺寸相同。

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

我试图弄乱这个解决方案： Reverse Scrolling 但我未能将其实施到我的项目中。

我不希望任何人解决我的问题。如果有人能指出我正确的方向，那就太好了。例如，让我知道到底出了什么问题，因为我仍然不确定它是否与 .right 类中的 bottom: calc(100% - 48px) 行有关，或者可能只是 javascript。

Answer 1

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

编辑： 可以只有一个位置为fixed 的包装器。它要求您获取.left 类的总高度并将其应用于.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>