反转网页的滚动[重复]答案

【问题标题】：Reversing the scroll of a webpage [duplicate]反转网页的滚动[重复]
【发布时间】：2015-03-08 14:28:11
【问题描述】：

如何反转我网站的滚动功能，当用户向上滚动时，页面会向相反方向向下滚动？

【问题讨论】：

我认为使用脚本不可能做到这一点。这更像是计算机/鼠标设置。
你为什么要折磨你的用户？？
@laaposto ....“乌龟”？ google.ca/imgres?imgurl=https://…
我认为这是可能的，因为我已经看到在管道网站上实施：conduit.com。
Conduit.com 跟踪滚动条的位置并相应地偏移右侧 div。您仍然在左侧 div 上正常向下滚动。

【解决方案1】：

对整个页面执行此操作会带来非常糟糕的体验。

您最终会执行以下操作，您可以在其中找到内容的高度，然后开始在固定视口中手动定位它：

var $window = $(window), $container, height;

$(function() {
  $container = $('#content');
  
  // Add some content
  for (var i = 0; i < 1000; ++i) {
    $container.append('<h1>line ' + i + '</h1>');
  }

  height = $container.outerHeight();
  $('body').css('height', height + 'px');
  
  // Set up scroll handling, but also invoke once to initialize positions
  $window.on('scroll', onScroll);
  onScroll();
});

function onScroll() {
  scrollTop = $window.scrollTop();
  $container.css('top', (scrollTop - height + $window.height()) + "px");
}

#content {
  position: absolute;  
}

#viewport {
  position: fixed;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="viewport">
  <div id="content">
  </div>
</div>

基本上，#viewport 保持固定在用户面前，占据整个屏幕。内容在#viewport 内向后滚动，而 HTML 文档正常滚动。

同时，#content 的高度约为 50,000 像素，我阅读并直接应用于文档，这样即使#content 包含在 #viewport 中，也会有一个适当大小的滚动条将固定高度设置为窗口的高度。

然后，在滚动时，实际内容获得位置，以便它向上移动与您使用scrollTop 滚动的相同距离。

【讨论】：

成功了！谢谢@meagar