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的图像数量和尺寸相同。 / p>

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

我试图弄乱这个解决方案： Reverse Scrolling但我没有在项目中实现这一点。

我不希望任何人解决我的问题。如果有人能指出我正确的方向，那就太好了。例如，让我知道什么是完全错误的，因为我仍然不确定它是关于bottom: calc(100% - 48px)类中的行.right还是仅仅是javascript。

Answer 1

好的，我想我是这样做的。它有效，但我对如何实现这一点并不满意。经过研究，我发现父母必须设置在position: fixed，因为如果没有这个，div元素会相互移动，使得我的页面在滚动时无限长，至少这是我理解这一点的方式。不幸的是，我不能仅仅在我的position课程中.outside，因为那时我将失去滚动网站的能力。因此，唯一可行的方法是在.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>

应用反向滚动后无限滚动

1 个答案: