Javascript 反向滚动
我很难找到一个解决方案来实现我的目标。我正在尝试使用JS（或其他库）来实现这一点，这样当用户在鼠标滚轮上向下滚动时，页面就会以与正常相反的方式滚动 基本上，我希望首先看到页面底部，当用户滚动时，我希望屏幕顶部向下进入视图。我能找到的唯一一个例子是 我已经用一个示例设置了一个JSFIDLE来帮助可视化它。我知道这可能与：Javascript 反向滚动,javascript,jquery,css,scroll,Javascript,Jquery,Css,Scroll,我很难找到一个解决方案来实现我的目标。我正在尝试使用JS（或其他库）来实现这一点，这样当用户在鼠标滚轮上向下滚动时，页面就会以与正常相反的方式滚动 基本上，我希望首先看到页面底部，当用户滚动时，我希望屏幕顶部向下进入视图。我能找到的唯一一个例子是 我已经用一个示例设置了一个JSFIDLE来帮助可视化它。我知道这可能与： window.scrolltop(); 但老实说，我不确定最好的方法 我希望标签为“1”的面板首先被看到，其余的面板在用户滚动时进入视图 任何关于如何做到这一点的想法都将不胜感
window.scrolltop();
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);
});
<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>
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;
}