我无法找到解决我要完成的任务的方法。我正在尝试使用 JS（或其他库）来制作它，以便当用户在鼠标滚轮上向下滚动时，页面会以与通常相反的方式滚动。
基本上，我希望首先看到页面的底部，当用户滚动时，我希望屏幕顶部进入视图。我能找到的唯一示例是http://conduit.com/的右侧列。
我已经建立了一个 JSFiddle http://jsfiddle.net/5UUtV/一个例子来帮助形象化它。我知道这可能与以下因素有关：
window.scrolltop();
但老实说，我不确定解决这个问题的最佳方法。
我希望首先看到标有“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
<body>
<div class="panelCon">
<div id="pane-5" class="panel">
<h1>5</h1>
</div>
<div id="pane-4"class="panel">
<h1>4</h1>
</div>
<div id="pane-3"class="panel">
<h1>3</h1>
</div>
<div id="pane-2" class="panel">
<h1>2</h1>
</div>
<div id="pane-1" class="panel">
<h1>1</h1>
</div>
</div>
</body>
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;
}