如果滚动窗口大小增加了如何查看按钮，如果滚动窗口大小减小了如何隐藏

Question

我在React.JS中创建了一个聊天应用程序，我在后端使用了Firebase。现在，我想显示一个滚动到某个高度的按钮，如果消息部分中的滚动高度不匹配，则再次隐藏该按钮。单击的按钮将滚动到屏幕底部，并显示最后收到的消息。 我还想使用数组作为 useEffect（）

的依赖项列表

我的代码是

import React, { useState, useEffect } from 'react'
import Message from './Message';

function Messages({ messageDetails, userName }) {

    var scrollBottom = true;

    useEffect(() => {
        var element = document.querySelector('.ref');
        var arrowButton = document.querySelector(".arrowButton");
        if (scrollBottom === false) {
            window.preventDefault();
        }
        if (window.scrollY > 0) {
            scrollBottom = false;
            arrowButton.style.display = "block"; 
        }
        if (scrollBottom === true) {
            window.scroll({
                top: element.scrollHeight,
                left: 0,
            });
            arrowButton.style.display = "none";
        }

    })
    return (
        <>
            <div className="ref" >
                {messageDetails.map((message) =>
                    <div key={message.Time_Stamp} >
                        {
                            <Message
                                messageBy={message.Sender}
                                messageTime={message.Time}
                                message={message.Message}
                                userName={userName}
                            />
                        }
                    </div>)
                }
            </div>
            <button className="arrowButton"><i className="arrowDown"></i></button>
        </>
    )
}

export default Messages

箭头按钮的CSS

    .arrowButton
    {
      position: fixed;
      bottom: 8vh;
      border-radius: 50%;
      background:#17a2b8;
      right:0;
      height:8vh;
      width:8vh;
      display:none;
    }
    .arrowDown
    {
      border: solid white;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }