为什么html的overflow-x:hidden会影响返回顶部按钮的脚本？
P粉633309801
2023-08-17 12:48:44
<p>由于 <code>html { overflow-x: hidden; }</code>，返回顶部按钮脚本中的 <em>vanish at top</em> 部分无法工作。</p>
<pre class="brush:php;toolbar:false;"><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;
}</pre>
<p>大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节，大部分是代码，请添加更多细节</p>
<p>如果我在html中去掉overflow-x，按钮将会在顶部消失，但整个网站内容的右侧将会有空白</p>
你应该尝试覆盖那个
overflow-x样式，并通过id选择你的元素。 CSS：#myBtn { overflow-x: visible !important; }