本文介绍了向下滚动,滚动100vh到底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我想在 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);
})

你可以在这里看到它:

You can see it working here: https://jsbin.com/foxigobano/1/edit?js,output

这篇关于向下滚动,滚动100vh到底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 18:07