Question

48

On scroll down, scroll 100vh to the bottom

rated 0 times [ 49] [ 1] / answers: 1 / hits: 22378 / 7 Years ago, sun, april 23, 2017, 12:00:00

I want to achieve the same effect at http://www.squaredot.eu/#Intro

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

document.addEventListener('scroll', function(e) {

    var currScroll = document.body.scrollTop;

    document.body.scrollTop = calc(~currScroll + 100vh);

 }



);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristinsonjab

Add To Favorites

Follow

Total Points: 364

Total Questions: 98

Total Answers: 98

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

kristinsonjab questions

1 is it possible to install canvas with M1 chip

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React-router v6 Route composition. Is it possible to render a custom Route?

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Next.js router locale issue

Fri, Jan 22, 21, 00:00, 3 Years ago

1 Sort array of objects by multiple properties of string type

Wed, Sep 2, 20, 00:00, 4 Years ago

1 Can't scroll down screen in react JS

Fri, Aug 14, 20, 00:00, 4 Years ago

View All

answered 7 Years ago jalyn · Accepted Answer

One solution could be using transform from CSS (like the website you linked is doing).

Add this as css:

body {

    transform: translate3d(0px, 0px, 0px);

    transition: all 700ms ease;

}

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

}

It only works for element 1 and 2 but it's a start, and you can learn how to implement the other steps!

Working example here:
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