一种解决方案可能是使用 CSS 转换（就像您链接的网站正在做的那样）。
将其添加为 css：
body {
transform: translate3d(0px, 0px, 0px);
transition: all 700ms ease;
}
这作为 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，但它只是一个开始，您可以学习如何实现其他步骤！
工作示例在这里：https://jsbin.com/titaremevi/edit?css,js,输出 https://jsbin.com/titaremevi/edit?css,js,output
UPDATE:
这是完全有效的解决方案：
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,输出 https://jsbin.com/foxigobano/1/edit?js,output
