javascript - 应用反向滚动后无限滚动

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类不会有设置 height - 我将在这个 div 中放入一些图像 - .left 的图像数量和尺寸相同和 .right分区

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

我试图弄乱这个解决方案: Reverse Scrolling但我未能将其实现到我的元素中。

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

Answer 1

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