Scrolling to an element on scroll (fullpage scroll)

user_7942242 0
Viewed 200

I try to scroll to an element when I scroll or use the wheel. Whatever my purpose is to do this juste one time, not on the whole website as the like shows.

The problem is, first it scrolls directly on page load, second it does not scroll on scroll or when I use the wheel.

Here is shot I did, my code :

componentDidMount() {
    window.addEventListener('wheel',  () => {
        document.querySelector("#services").scrollIntoView(true)
    })
    window.addEventListener('scroll',  () => {
        document.querySelector("#services").scrollIntoView(true)
    })      
}

If I listen my logic what I do is: When wheel detected (or scroll) scroll to this point.

So my question is, why it does not work as expected ?

EDIT

I discovered that it is more glitchy with the following css 

html {
  scroll-behavior: smooth;
}

I tried something else that works but only without the CSS above, with the css it does not work, that obscure. 

componentDidMount() {
    window.addEventListener('wheel', () => {
        location.hash = "#services"
    })  
}

So it scroll directly to the element, IF the css is not set. But it has no sense, and I need this css...

reactjs scroll animation javascript
1 Answers

I tried an automatic scroll up/down at certain point that would not lag even if we use scroll-behaviour:smooth.

Basically i made every div's position absolute and the moment scroll value ran past a certain number it would fire an animation based on the scroll direction(i.e scroll-Up or scroll-Down) thereby giving it an automatic scroll effect.

Initially I used only javascript to achieve the same but window.scrollTo() function was lagging when the scroll-behaviour was smooth i checked a lot but could not find a solution to alter the speed of smooth scrolling.Later realised that in smooth scrolling it would do a smooth transition for every scroll change so when window.scrollY changes from x(let) to x+1 it would do a transition and then for x+1 to x+2 and so on... resulting in real slow scroll just like in movie's end credits(but they are also a bit fast).

Hope this works for you

EDIT:One more thing this effect is made keeping in mind that the screen resolution is 1366 x 768.The automatic scroll transition would fire a bit earlier in higher resolution(1920 x 1080).

See it in fullscreen

var lastScrollValue = window.pageOffsetY || document.documentElement.scrollTop;
window.addEventListener('scroll', function() {
  var scrolled = window.scrollY;
  var present_scroll_value = window.pageOffsetY || document.documentElement.scrollTop;
 
  if (scrolled >= 625 && scrolled <= 854) {
    if (present_scroll_value > lastScrollValue) {
      //scroll Down
      document.getElementsByClassName('scroll_automatic_page')[0].style.animation = "scrollup 2s 1 forwards";
      document.getElementsByClassName('third_page')[0].style.animation = "moveUp 1s 1s 1 forwards";
    } else {
      //scroll Up
      document.getElementsByClassName('scroll_automatic_page')[0].style.animation = "scrolldown  2s  1 forwards";
      document.getElementsByClassName('third_page')[0].style.animation = "moveDown 1s  1 forwards";
    }
  }
  lastScrollValue = present_scroll_value <= 0 ? 0 : present_scroll_value;

}, false);
* {
  margin: 0px;
  padding: 0px;
  font-family: 'Arial';
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  max-height: 200vh;
}

.first_page {
  position: absolute;
  background-color: #63B5E8;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  overflow-y: hidden;
}

.first_page h1 {
  font-size: 290px;
  -webkit-text-fill-color: #2E80B3;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
}

.scroll_automatic_page {
  position: absolute;
  background-color: #000000;
  width: 100vw;
  height: 700vh;
  margin-top: 100vh;
  z-index: 9;
  overflow: hidden;
  animation-fill-mode: forwards;
}

@keyframes scrollup {
  from {
    transform: translateY(0vh);
    overflow: hidden;
  }
  to {
    transform: translateY(-700vh);
    overflow: hidden;
  }
}

@keyframes scrolldown {
  from {
    transform: translateY(-700vh);
    overflow: hidden;
    z-index:20;
  }
  to {
    transform: translateY(0vh);
    overflow: hidden;
    z-index:20;
  }
}

.scroll_automatic_page h1 {
  font-size: 500px;
  padding-top: 200px;
  letter-spacing: 8px;
  color: black;
  -webkit-text-fill-color: white;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}

.letter {
  position: absolute;
  padding-top: 0px;
}

.third_page {
  position: absolute;
  height: 200vh;
  width: 100vw;
  margin-top: 100vh;
  z-index: 8;
}

.third_page h1 {
  text-align: center;
  font-size: 200px;
  padding-top: 200px;
  -webkit-text-fill-color: black;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}

@keyframes moveDown {
  from {
    transform: translateY(200px);
  }
  to {
    transform: translateY(900px);
  }
}

@keyframes moveUp {
  from {
    transform: translateY(700px);
  }
  to {
    transform: translateY(180px);
  }
}
<div class="first_page">
  <h1>FIRST PAGE</h1>
</div>
<div class="scroll_automatic_page">
  <h1>SCROLL DOWN :)</h1>
</div>


<div class="third_page" id="thirdpage">
  <h1>
    THE END
  </h1>
</div>

user_142252990
Related