为什么html的overflow-x:hidden会影响返回顶部按钮的脚本？

Question

由于 html { overflow-x: hidden; }，返回顶部按钮脚本中的 vanish at top 部分无法工作。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 包含 jQuery -->

    <button onclick="topFunction()" class="buton" id="myBtn" title="回到顶部"><i class="fa-solid fa-angle-up"></i>

        <script>
    let mybutton = document.getElementById("myBtn");
    
    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
      } else {
        mybutton.style.display = "none";
      }
    }
    
    function topFunction() {
      document.body.scrollTop = 0; // 适用于 Safari
      document.documentElement.scrollTop = 0; // 适用于 Chrome, Firefox, IE 和 Opera
    }
            </script>
            </button>

CSS


    html,
    body {
    height: 100%;
    scroll-behavior: smooth;
    position: relative;
    overflow-x: hidden;
  }

body {
    background-color:#060606;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.buton {
  overflow-x: visible !important;
}
  
#myBtn {
  display: none;
  position: fixed; 
  bottom: 20px; 
  right: 30px; 
  z-index: 99; 
  border: none; 
outline: none;
  background-color: red; 
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px; 
}

#myBtn:hover {
  background-color: #333; 
}

大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节

如果我在html中去掉overflow-x，按钮将会在顶部消失，但整个网站内容的右侧将会有空白

Answer 1

你应该尝试覆盖那个 overflow-x 样式，并通过 id 选择你的元素。 CSS：

#myBtn {
  overflow-x: visible !important;
}