我无法找到解决我想要完成的事情的方法。我正在尝试使用 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;
}
关于javascript - 反向滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29183308/