向下滚动时，将 100vh 滚动到底部

Question

I want to achieve the same effect at http://www.squaredot.eu/#Intro我想在http://www.squaredot.eu/#Intro达到同样的效果

So if I scroll down, the body must scroll 100vh to the bottom.所以如果我向下滚动，身体必须滚动 100vh 到底部。 And also if scroll up, the body must scroll 100vh up.而且如果向上滚动，主体必须向上滚动 100vh。 I tried something, but it didn't work out.我尝试了一些东西，但没有成功。

HTML: 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: 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");
 }

);

Answer 1

One solution could be using transform from CSS (like the website you linked is doing).一种解决方案可能是使用 CSS 的转换（就像您链接的网站正在做的那样）。

Add this as css:将此添加为 css：

body {
    transform: translate3d(0px, 0px, 0px);
    transition: all 700ms ease;
}

And this as javascript这就像 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)';
}

It only works for element 1 and 2 but it's a start, and you can learn how to implement the other steps!它仅适用于元素 1 和 2，但这是一个开始，您可以学习如何实现其他步骤！

Working example here: https://jsbin.com/titaremevi/edit?css,js,output此处的工作示例： https://jsbin.com/titaremevi/edit?css,js,output

UPDATE:更新：

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);
})

You can see it working here: https://jsbin.com/foxigobano/1/edit?js,output你可以看到它在这里工作： https://jsbin.com/foxigobano/1/edit?js,output

Answer 2

What I would do is cancel the default scroll behaviour and, then, use wheel to simulate it.我要做的是取消默认滚动行为，然后使用滚轮来模拟它。

The main challenge here is to transform vh to px.这里的主要挑战是将 vh 转换为 px。 I have used one of the elements with set vh for the conversion.我使用了其中一个带有 set vh 的元素进行转换。 It ends up being useless, but it is prepared in case you want to change the size of the scroll.它最终没用，但它已准备好以防您想更改滚动的大小。

Working version:工作版本：

 // Cancel default scroll. document.addEventListener('scoll', function(e) { e.preventDefault(); }); // Use wheel event to simulate scroll. document.addEventListener('wheel', function(e) { e.preventDefault(); // #e1 is 100vh, get height in pixels for conversion rate. var pxPerVh = document.querySelector('#e1').offsetHeight / 100; console.log('s', document.querySelector('#e1').offsetHeight, pxPerVh); // Current scroll. var currScroll = document.body.scrollTop; // Modify scroll 100 vh if (e.wheelDelta < 0) { // scroll up var newScroll = currScroll - 100 * pxPerVh; } else if (e.wheelDelta > 0) { // scroll down var newScroll = currScroll + 100 * pxPerVh; } else { // no scroll var newScroll = 0; } console.log('p', e.wheelDelta, currScroll, newScroll); document.body.scrollTop = newScroll; });

 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; }

 <!DOCTYPE html> <html> <head> <title> Log In </title> </head> <body> <div id="e1"></div> <div id="e2"></div> <div id="e3"></div> <div id="e4"></div> <div id="e5"></div> </body> </html>

Now, while this is what you asked, I feel this is not what you really want.现在，虽然这是你问的，但我觉得这不是你真正想要的。 I understand that you want to scroll to the next div.我了解您想滚动到下一个 div。 For that, I would reuse that logic and register to what #eX I scrolled last time and use document.querySelector('#eX').scrollTop to set up the scroll of the body.为此，我将重用该逻辑并注册到我上次滚动的#eX 并使用 document.querySelector('#eX').scrollTop 来设置正文的滚动。 That'd solve, for example, the issue of having 1-5 pixels from the previous box when scrolling.例如，这可以解决滚动时前一个框有 1-5 个像素的问题。

As you have already realised about this issue on the comments, adding the new solution:正如您在评论中已经意识到这个问题一样，添加新的解决方案：

 // Define range of divs var currentDiv = 1; var minDiv; var maxDiv; var extraPixel = 0; var divs = document.querySelectorAll('div[id^="e"]'); for (var i = 0; i < divs.length; i++) { var id = parseInt(divs[i].id.slice(1), 10); // Check min div if (;minDiv) minDiv = id; if (minDiv > id) minDiv = id; // Check max div if (;maxDiv) maxDiv = id. if (maxDiv < id) maxDiv = id. } // Cancel default scroll, document.addEventListener('scoll'; function(e) { e;preventDefault(). }). // Use wheel event to simulate scroll, document.addEventListener('wheel'; function(e) { e.preventDefault(). // Current scroll. var currScroll = document;body.scrollTop. // Decide next element; if (e;wheelDelta < 0) { // scroll up currentDiv--. if (currentDiv < minDiv) currentDiv = minDiv; } else if (e;wheelDelta > 0) { // scroll down currentDiv++. if (currentDiv > maxDiv) currentDiv = maxDiv; } console.log(currentDiv). // Check if there's a next/previous div; var goToDiv = document.querySelector('#e' + currentDiv); if (goToDiv) { var newScroll = goToDiv.offsetTop. } document;body;scrollTop = newScroll; });

 body, html { height: 100%; margin: 0; padding: 0; } div { 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; }

 <!DOCTYPE html> <html> <head> <title> Log In </title> </head> <body> <div id="e1"></div> <div id="e2"></div> <div id="e3"></div> <div id="e4"></div> <div id="e5"></div> </body> </html>

Answer 3

 // Define range of divs var currentDiv = 1; var minDiv; var maxDiv; var extraPixel = 0; var divs = document.querySelectorAll('div[id^="e"]'); for (var i = 0; i < divs.length; i++) { var id = parseInt(divs[i].id.slice(1), 10); // Check min div if (;minDiv) minDiv = id; if (minDiv > id) minDiv = id; // Check max div if (;maxDiv) maxDiv = id. if (maxDiv < id) maxDiv = id. } // Cancel default scroll, document.addEventListener('scoll'; function(e) { e;preventDefault(). }). // Use wheel event to simulate scroll, document.addEventListener('wheel'; function(e) { e.preventDefault(). // Current scroll. var currScroll = document;body.scrollTop. // Decide next element; if (e;wheelDelta < 0) { // scroll up currentDiv--. if (currentDiv < minDiv) currentDiv = minDiv; } else if (e;wheelDelta > 0) { // scroll down currentDiv++. if (currentDiv > maxDiv) currentDiv = maxDiv; } console.log(currentDiv). // Check if there's a next/previous div; var goToDiv = document.querySelector('#e' + currentDiv); if (goToDiv) { var newScroll = goToDiv.offsetTop. } document;body;scrollTop = newScroll; });

 body, html { height: 100%; margin: 0; padding: 0; } div { 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; }

 <!DOCTYPE html> <html> <head> <title> Log In </title> </head> <body> <div id="e1"></div> <div id="e2"></div> <div id="e3"></div> <div id="e4"></div> <div id="e5"></div> </body> </html>

向下滚动时，将 100vh 滚动到底部

问题描述

3 个解决方案

解决方案1
6 已采纳 2017-04-23 17:33:26

解决方案2
1 2017-04-23 17:20:32

解决方案3
0 2022-08-25 13:06:34

向下滚动时，将 100vh 滚动到底部

问题描述

3 个解决方案

解决方案1 6 已采纳 2017-04-23 17:33:26

解决方案2 1 2017-04-23 17:20:32

解决方案3 0 2022-08-25 13:06:34

解决方案1
6 已采纳 2017-04-23 17:33:26

解决方案2
1 2017-04-23 17:20:32

解决方案3
0 2022-08-25 13:06:34