javascript - 如何在 reactjs return 语句中设置滚动条高度？

Question

我目前在设置滚动条高度时遇到问题。我找到了一些使用 javascript 设置滚动条高度的方法，但它不适用于我的程序，因为我使用的是 reactjs。

我有一个聊天系统，其中包含一个可滚动的聊天框。每次呈现页面时，都会在聊天框中设置聊天框内的消息:

    render() {

         return (

              /*... irrelevant code ...*/

                    <div id = "chat">
                        <div id = "chatBox" className = "chatBox">
                            <AllChatMessages allMessages = {this.props.allMessages} />
                        </div>
                        <form id="chatForm" action = "#">
                            <input id = "chatInput" autoComplete="off" ></input>
                            <button id = "chatSend" type="submit">Send</button>
                        </form>
                    </div>

              /*... more irrelevant code ... */

        );
    }

我目前有“聊天框”的 CSS，如下所示:

    #chatBox{
        position: relative;
        order: 0;
        width: 42.6em;
        height: 9.7em;
        border: 2px solid #2f5f6f;
        border-radius: 0.5em;
        padding: 10px;
        padding-top: 5px;
        text-align: left;
        margin: 1em;
        margin-bottom: 0em;
        overflow-y: auto;
        word-wrap: break-word;
    }

    .chatBox::-webkit-scrollbar{
        width: 15px;
    }

    .chatBox::-webkit-scrollbar-track{
        box-shadow: inset 0px 0px 10px #2f5f6f; 
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    } 

    .chatBox::-webkit-scrollbar-thumb {
        background: rgba(47,95,111,0.8); 
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }

    .chatBox::-webkit-scrollbar-thumb:hover{
        background: rgba(47,95,111,1);
    }

由于聊天框仅在我将代码块返回到我的网站后才存在，在我看来(并且我已经尝试了几种方法)我无法使用 javascript 将滚动条的高度设置为底部(因为任何 javascript 都必须在 return 语句之前)。

有什么方法可以以某种我缺少的方式将滚动条的高度自动设置到底部吗？也许我可以用 CSS 做到这一点？

Answer 1

你可以在 react 中调用 render 之后运行 javascript。您必须在 componentDidMount() 中包含要运行的代码附加到与渲染相同的类的函数。

我认为您正在尝试将可滚动内容的位置设置为内容的底部。您可以使用 scrollTop和 scrollHeight做这个。

class MyComponent extends Component {
     componentDidMount() {
          let chatBox = document.getElementById('chatBox');
          chatBox.scrollTop = chatBox.scrollHeight;
     }

     render() {...}
}