javascript 反向滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20776045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reverse Scrolling
提问by Patrick Allen
I'm having trouble finding a solution to what I'm trying to accomplish. I am trying to use JS (or additional libraries) to make it so that when the user scrolls down on the mousewheel the page scrolls the opposite way than it normally would.
我无法找到解决我要完成的任务的方法。我正在尝试使用 JS（或其他库）来制作它，以便当用户在鼠标滚轮上向下滚动时，页面会以与通常相反的方式滚动。
Basically, I want the bottom of the page to be seen first and as the user scrolls I want the top of the screen to come down into view. The only example I've been able to find is the right column of http://conduit.com/.
基本上，我希望首先看到页面的底部，当用户滚动时，我希望屏幕顶部进入视图。我能找到的唯一示例是http://conduit.com/的右侧列。
I've set up a JSFiddle http://jsfiddle.net/5UUtV/with an example to help visualize it. I know it might have something to do with:
我已经建立了一个 JSFiddle http://jsfiddle.net/5UUtV/一个例子来帮助形象化它。我知道这可能与以下因素有关：
window.scrolltop();
but honestly, I'm not sure of the best way to go about this.
但老实说，我不确定解决这个问题的最佳方法。
I want the panel labeled '1' to be seen first, and the rest to come down into view as the user scrolls.
我希望首先看到标有“1”的面板，然后在用户滚动时看到其余的面板。
Any ideas on how this could be done would be greatly appreciated.
关于如何做到这一点的任何想法将不胜感激。
Thanks
谢谢
采纳答案by Rohit Agrawal
here is the solution - http://jsfiddle.net/5UUtV/1/
这是解决方案 - http://jsfiddle.net/5UUtV/1/
JS
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
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
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;
}
