反向滚动答案

【问题标题】：Reverse Scrolling反向滚动
【发布时间】：2014-01-13 14:10:37
【问题描述】：

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

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

我已经设置了一个 JSFiddle http://jsfiddle.net/5UUtV/ 并带有一个示例来帮助可视化它。我知道这可能与以下内容有关：

window.scrolltop();

但老实说，我不确定解决这个问题的最佳方法。

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

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

谢谢

【问题讨论】：

标签： javascript jquery css scroll

【解决方案1】：

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

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;
}

【讨论】：