如何将 window.scrollby 与 react 一起使用？答案

【问题标题】：How can I use window.scrollby with react?如何将 window.scrollby 与 react 一起使用？
【发布时间】：2022-04-08 18:17:05
【问题描述】：

我正在尝试单击一个向下滚动到我的应用程序特定部分的按钮。所以目前我有：

class Nav extends Component {
  foo(){
    console.log('baz')
    window.scrollTo(0, 100);
  }
  render() {
    return (
        <nav>
          <a href="#" onClick={()=> this.foo()}>About</a>

        </nav>
    );
  }
}

这将 console.log "baz" 但不会向下滚动到 100

【问题讨论】：

试试这个，给那个元素分配一个id，然后使用document.getElementById(id).scrollIntoView();
不，没有用

标签： css reactjs

【解决方案1】：

删除

href="#"

这导致链接链接到页面顶部

【讨论】：

【解决方案2】：

你可以这样做 -

const handleRef = (param) => window.scrollTo(0, param);
<p onClick={()=> handleRef(1000)} >Drops</p>

【讨论】：

【解决方案3】：

import react from "react";


const Stchange = ()=>{


const dev = ()=>{

window.scrollBy(0,50);

}
    return(

        <>

        <button onClick={dev}>Scroll</button>

          <h1>There are man struc Lorem Ipsum which looks reasonable. The</h1>

        </>
    )
}

export default Stchange;

【讨论】：

这个答案可以解释一下