为什么html的overflow-x:hidden会影响返回顶部按钮的脚本?
P粉633309801
P粉633309801 2023-08-17 12:48:44
[CSS3讨论组]
<p>由于 <code>html { overflow-x: hidden; }</code>,返回顶部按钮脚本中的 <em>vanish at top</em> 部分无法工作。</p> <pre class="brush:php;toolbar:false;">&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;!-- 包含 jQuery --&gt; &lt;button onclick="topFunction()" class="buton" id="myBtn" title="回到顶部"&gt;&lt;i class="fa-solid fa-angle-up"&gt;&lt;/i&gt; &lt;script&gt; let mybutton = document.getElementById("myBtn"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 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 } &lt;/script&gt; &lt;/button&gt; 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>
P粉633309801
P粉633309801

全部回复(1)
P粉329425839

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

#myBtn {
  overflow-x: visible !important;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号