在网页上实现反向滚动效果
Ideas_to_implement，我一直想拥有自己的网站。真的很漂亮，而且独一无二。
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
大家好，创建网站时，浏览器通常会从页面顶部开始加载，然后用户向下滚动浏览。但如果你的设计理念是反向滚动呢？如果你想让页面从底部向上滚动浏览呢？这篇博客将教你如何仅用三个步骤在你的网站上实现反向滚动……
1. 只需7行HTML代码即可：
在一个主容器内创建面板/部分。我创建了 5 个，但您可以根据需要创建更多。
<div class="panelCon">
<div id="pane-5" class="panel">Section 5</div>
<div id="pane-4" class="panel">Section 4</div>
<div id="pane-3" class="panel">Section 3</div>
<div id="pane-2" class="panel">Section 2</div>
<div id="pane-1" class="panel">Section 1</div>
</div>
2. 几行 CSS 代码：
- 将每个面板的高度设置为视口高度。
- 将主容器的位置设置为固定，底部设置为 0。将主体高度设置为 (100*面板数)vh。
- 下图可以看到，由于我创建了 5 个面板，所以主体高度设置为 500vh。
body {
margin: 0;
padding: 0;
height: 500vh;
}
.panelCon {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 99990;
}
.panel {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
line-height: 35px;
text-transform: uppercase;
}
#pane-1 {
background-color: pink;
}
#pane-2 {
background-color: #e8e8e8;
}
#pane-3 {
background-color: red;
}
#pane-4 {
background-color: pink;
}
#pane-5 {
background-color: yellow;
}
3. 最后，只需 3 行 JS 代码：
在窗口的 onScroll 函数中，增加底部的值，但要用负数😉
$(window).on("scroll", function () {
$(".panelCon").css("bottom", $(window).scrollTop() * -1);
});
好了，大功告成。
。
不想按照步骤操作？下面是GitHub链接：）
演示：https://tbaveja.github.io/reverse-scrolling/
代码：https://github.com/tbaveja/reverse-scrolling
。
感谢阅读！
文章来源：https://dev.to/tbaveja/implement-reverse-scrolling-effect-on-webpage-58g0请在领英上与我联系：
https://www.linkedin.com/in/tarun-baveja-000a9955/