Question

我在带有height和overflow css的div元素中有一个滚动条，我希望div从底部开始。 我是在javascript JSfiddle

中完成的

var objDiv = document.getElementById("scrolldiv");
objDiv.scrollTop = objDiv.scrollHeight;

#scrolldiv{
  width:115px;
  height:100px;
  overflow:auto;
  border: 2px black solid;
}

<div id="scrolldiv">
 <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
          <li>Instagram</li>
        </ul>
</div>

如何在reactjs中应用我的javascript代码？

class ShoppingList extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            pageNumber: 1
        }
    }


  render() {
    return (
      <div className="shopping-list"  id="scrolldiv">
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

Answer 1

使用React Refs来获取元素：

class ShoppingList extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            pageNumber: 1
        }
    }

    componentDidMount() {
        let shoppingListContainer = document.getElementById("scrolldiv");
        shoppingListContainer.scrollTop = shoppingListContainer.scrollHeight;
    }

    render() {
        return (
            <div className="shopping-list" id="scrolldiv">
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
            </div>
        );
    }
}

嗯，Mui Dialog组件在显示对话框时似乎没有钩子来运行函数，但是你可以将滚动逻辑移动到handleOpen方法，如下所示：

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            open: false,
        }
    }

    handleOpen = () => {
        this.setState({ open: true });
        // hack
        setTimeout(() => {
            let shoppingListContainer = document.getElementById("scrolldiv");
            if (shoppingListContainer !== null) {
                shoppingListContainer.scrollTop = shoppingListContainer.scrollHeight;
            }
        }, 100);
    };
    handleClose = () => {
        this.setState({ open: false });
    };

    render() {
        return (
        <MuiThemeProvider>
        <div>
            <RaisedButton label="Alert" onClick={this.handleOpen} />
            <Dialog
            title="Dialog With Actions"
            modal={false}
            open={this.state.open}
            onRequestClose={this.handleClose}
            >

                <div className="shopping-list" id="scrolldiv" 
                style={{
                width: 125,
                height: 100,
                overflow: 'auto',
                border: '2px black solid'
                }}>
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
                </div>
            </Dialog>

        </div>
        </MuiThemeProvider>
        );
    }
}

render(<App />, document.getElementById('root'));

滚动条从底部Reactjs开始

1 个答案: