我的頁面上有 2 個滾動條，不知道為什么

Question

我現在正在創建一個網站已經很長時間了。 我用它做的最后一件事是讓它在我的第二台較小的筆記本電腦上響應媒體查詢。 但是，我注意到當我在主計算機上打開該站點時出現了另一個滾動條。 2 個右側滾動條不相關。

整個網站都在一個文件夾中，所以我不能真正共享 HTML/CSS 代碼。 首先，我想知道是否有人已經遇到過這種問題，並且可以建議我從哪里開始解決它。 我猜它是在我可能創建許多 body/html 規則的 CSS 中？

謝謝 ！

Answer 1

不久前我也遇到過類似的問題。
為了獲得更好的答案，我應該閱讀代碼，但我可以告訴你應該從哪里開始尋找問題。 這可能是因為您頁面中的 div 具有諸如“overflow-y：auto”之類的規則，並且它的父級本身大於當前頁面高度。

 .container1 { background-color: red; height: 10000px; width: 100%; } .container2 { background-color: blue; height: 100vh; width: 100%; overflow-y: auto; } .container3 { background-color: green; height: 10000px; width: 50px; }

 <div class="container1"> <div class="container2"> <div class="container3"> </div> </div> </div>

我制作了一個快速片段，您可以執行以更好地了解正在發生的事情。

我希望這可以幫助您找到問題。

Answer 2

所以基本上你在你的div上啟用了溢出，默認是body。 因此你看到了 2 個滾動條。 一個div和一個body。

如果您通過禁用默認的正文滾動條並保持 div 在 y 軸上可溢出來解決它，那就太好了。

Answer 3

終於解決了。 我不得不手動將 <style : "overflow-y:hidden;"> 放在我的 html 頁面上的正文中，即使我嘗試使用 CSS 來解決它。 現在一切正常！