Click to scroll anywhere

Involving knowledge points:

the window.scrollTo (X, Y) 
requestAnimationFrame (() => {})   // frame animation, advantages: by the refresh renderer browser, more smooth. Features: Similar to setTimeout executes only once

What is not said on the code:

  num is the position to be reached, the digital type. Call: this.transitionScroll (100)

transitionScroll = (num) => {
    const n = window.pageYOffset;
    if(num < n) {
        this.ScrollDown(num)
    }
    if(num > n) {
        this.ScrollUp(num)
    }
}

ScrollDown = (num) => {
    const sensitivity = 5; //灵敏度
    window.requestAnimationFrame(() => {
        const n = window.pageYOffset;
        const Dvalue = Math.abs(num - n);
        if (num > n + sensitivity) {
            window.scrollTo(0, n + parseInt(Dvalue / sensitivity))
            this.ScrollDown(num)
        }
    })
}
   
ScrollDown = (num) => {
    const sensitivity = 5;
    window.requestAnimationFrame(() => {
        const n = window.pageYOffset;
        const Dvalue = Math.abs(num - n);
        if (num < n - sensitivity) {
            window.scrollTo(0, n - parseInt(Dvalue / sensitivity))
            this.ScrollDown(num)
        }
    })
}

 

Guess you like

Origin www.cnblogs.com/MrZhujl/p/11612423.html