CODEWITHSUNDEEP
javascriptreactjssetinterval
Knowledge Seeker
Knowledge Seeker

Reputation: 566

Scrollbar in ReactJS

I want page to scroll up gently when modal opens opens. But it is not working as expected. Instead, the scrollbar is moving abruptly upward. Am I doing anything wrong here ? 

ScrollingSteps() {
    console.log(window.pageYOffset);/* This is giving me 0, even when scroll 
    bar is not on the top. Why is it showing this strange behavior ? */
    if (window.pageYOffset === 0) {
        clearInterval(this.state.intervalId);
    }

    window.scroll(0, window.pageYOffset - 5);// It is showing abrupt change
    console.log(document.body.scrollTop,document.body.style.top)/*Even these 2 are 0 here. Don't understand why!*/
}


ScrollingToTop() {
    let myID = setInterval(this.ScrollingSteps.bind(this), 5);
}

Upvotes: 1

Views: 40

Answers (1)

gdh
gdh

Reputation: 13682

with window.scrollTo you can make use of behavior prop adn provide value smooth

window.scrollTo({
  top: 0,
  left: window.pageYOffset - 5,
  behavior: 'smooth',
})

see here for details:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Upvotes: 2

Related Questions