分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

javascript – React：设置div的scrollTop属性不起作用

HTML   发布时间：2019-10-08  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – React：设置div的scrollTop属性不起作用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_607_0@

我是新手做出反应,目前我正在尝试将div的scrollTop属性设置为所需的数字.不幸的是,它对我不起作用.请参阅以下代码：

class Testdiv extends React.Component {
  constructor(props){
    super(props);
    this.divRef = React.createRef();
  }
  componentDidMount(){
    this.divRef.current.scrollTop = 100;
  }
  render(){
    return (
     
{this.divRef}>
      Hello World
Hello World!
      );
  }
}
ReactDOm.render(
 );

而CSS：

.testDiv{
  height: 500px;
  overflow: auto;
}

Here是相应代码的codeio笔.附：我不想使用Jquery.感谢您的帮助.

最佳答案
您必须确保testDiv的内容高于容器本身,并在y轴上设置溢出以进行滚动.

例

class Testdiv extends React.Component {
  divRef = React.createRef();

  componentDidMount() {
    setTimeout(() => {
      this.divRef.current.scrollTop = 1000;
    },1000);
  }

  render() {
    return (
      
{{ height: 200,overflowY: "scroll" }} ref={this.divRef}>
        Hello World
        
{{ height: 300 }} />
        Hello World!
      );
  }
}

ReactDOm.render();