Question

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

Answer 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仍然固定在用户的前方，占据整个屏幕。当HTML文档正常滚动时，内容在#viewport内向后滚动。

同时，#content的高度为~50,000px，我将其读取并直接应用于文档，因此即使#content中包含#viewport，也会有适当大小的滚动条scrollTop具有固定高度设置为窗口的高度。

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

反转网页的滚动

1 个答案: