反向滚动 [英] Reverse Scrolling
问题描述
我无法找到我要完成的解决方案。我试图使用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-5class =panel>
< h1> 5< / h1>
< / div>
< div id =pane-4class =panel>
< h1> 4< / h1>
< / div>
< div id =pane-3class =panel>
< h1> 3< / h1>
< / div>
< div id =pane-2class =panel>
< h1> 2< / h1>
< / div>
< div id =pane-1class =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;
}
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.
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/.
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:
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.
Any ideas on how this could be done would be greatly appreciated.
Thanks
here is the solution - 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;
}
这篇关于反向滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
