反向滚动

我无法找到我想要完成的解决方案。 我正在尝试使用JS（或其他库）来实现它，以便当用户在鼠标滚轮上向下滚动时，页面的滚动方式与通常情况相反。

基本上，我希望首先看到页面底部，当用户滚动时，我希望屏幕顶部进入视图。 我能找到的唯一例子是http://conduit.com/的右栏。

我已经设置了一个JSFiddle http://jsfiddle.net/5UUtV/，其中有一个示例来帮助可视化它。 我知道这可能与某些事情有关：

window.scrolltop(); 

但老实说，我不确定最好的办法。

我希望首先看到标有“1”的面板，然后在用户滚动时将其余部分放入视图中。

关于如何做到这一点的任何想法将不胜感激。

谢谢

Answer 1

这是解决方案 – http://jsfiddle.net/5UUtV/1/

JS

 var winHeight = $(window).innerHeight(); $(document).ready(function () { $(".panel").height(winHeight); $("body").height(winHeight*$(".panel").length); }); window.addEventListener('resize', function (event) { $(".panel").height($(window).innerHeight()); }); $(window).on('scroll',function(){ $(".panelCon").css('bottom',$(window).scrollTop()*-1); }); 

HTML

  
 
 
5
 
 
 
4
 
 
 
3
 
 
 
2
 
 
 
1
 
 
  

CSS

 body { margin: 0; padding: 0; } .panelCon{ position: fixed; bottom: 0; left:0; width: 100%; } .panel { width: 100%; } .panel h1 { width: 100px; position: relative; display: block; margin: 0 auto; text-align: center; top: 50%; } #pane-1 { background-color: green; } #pane-2 { background-color: red; } #pane-3 { background-color: white; } #pane-4 { background-color: pink; } #pane-5 { background-color: yellow; }