向下滚动，滚动100vh到底部 [英] On scroll down, scroll 100vh to the bottom
问题描述
我想在 http://www.squaredot.eu/#Intro
因此，如果我向下滚动，身体必须滚动100vh到底部。而且如果向上滚动，身体必须向上滚动100vh。我尝试了一些东西，但它没有成功。
So if I scroll down, the body must scroll 100vh to the bottom. And also if scroll up, the body must scroll 100vh up. I tried something, but it didn't work out.
HTML：
<!DOCTYPE html>
<html>
<head>
<title> Log In </title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="e1"></div>
<div id="e2"></div>
<div id="e3"></div>
<div id="e4"></div>
<div id="e5"></div>
</body>
</html>
CSS：
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#e1 {
width: 100%;
height: 100vh;
background-color: red;
}
#e2 {
width: 100%;
height: 100vh;
background-color: green;
}
#e3 {
width: 100%;
height: 100vh;
background-color: yellow;
}
#e4 {
width: 100%;
height: 100vh;
background-color: blue;
}
#e5 {
width: 100%;
height: 100vh;
background-color: orange;
}
JAVASCRIPT
JAVASCRIPT
document.addEventListener('scroll', function(e) {
var currScroll = document.body.scrollTop;
document.body.scrollTop = calc(~"currScroll + 100vh");
}
);
推荐答案
一种解决方案可能是使用CSS转换（如你链接的网站正在做。）
One solution could be using transform from CSS (like the website you linked is doing).
将此添加为css：
body {
transform: translate3d(0px, 0px, 0px);
transition: all 700ms ease;
}
这是javascript
And this as javascript
var pageHeight = window.innerHeight;
document.addEventListener('scroll', function(){
document.body.scrollTop = 0;
});
document.addEventListener('wheel', function(e) {
//console.log(e.deltaY);
if(e.deltaY > 0) {
scrollDown();
} else {
scrollUp();
}
}
);
function scrollDown() {
document.body.style.transform = 'translate3d(0px, -'+ pageHeight + 'px, 0px)';
}
function scrollUp() {
document.body.style.transform = 'translate3d(0px, 0px, 0px)';
}
它仅适用于元素1和2，但它是一个开始，你可以学习如何实施其他步骤！
It only works for element 1 and 2 but it's a start, and you can learn how to implement the other steps!
这里的工作示例：
https://jsbin.com/titaremevi/edit?css,js,output
更新：
这是一个完全有效的解决方案：
This is the fully working solution:
var pageHeight = window.innerHeight;
var isAnimating = false;
document.body.style.transform = 'translate3d(0px,0px,0px)';
document.addEventListener('scroll', function(e){
document.body.scrollTop = 0;
});
document.addEventListener('wheel', wheelListener);
function wheelListener(e) {
if(e.deltaY > 0) {
scrollPage(-pageHeight);
} else {
scrollPage(+pageHeight);
}
}
function scrollPage(scrollSize) {
if(isAnimating){
return;
}
isAnimating = true;
var yPos = getNewYPos(scrollSize);
document.body.style.transform = 'translate3d(0px,'+ yPos + ',0px)';
}
function getNewYPos(add){
var oldYPos = document.body.style.transform.split(',')[1];
oldYPos = parseInt(oldYPos.replace(/px/,''));
var newYPos = oldYPos + add;
if(newYPos > 0){
isAnimating = false;
}
return Math.min(0, newYPos) + 'px';
}
document.body.addEventListener('transitionend', function(){
setTimeout(function(){ isAnimating = false; }, 500);
document.addEventListener('wheel', wheelListener);
})
你可以在这里看到它： https://jsbin.com/foxigobano/1/edit ？js，输出
You can see it working here: https://jsbin.com/foxigobano/1/edit?js,output
这篇关于向下滚动，滚动100vh到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
