如何删除双滚动条？

Question

我在Chrome和Firefox的网站上有一个双滚动条（两个浏览器都是最新的）。我一直在研究web和stackoverflow，并尝试在html元素上遵循建议的选项：

html { overflow: hidden; } - 之后 - html { overflow: auto; } - 和 - html { overflow: scroll; }

他们都没有摆脱双杠，更糟糕的是有些人阻止我滚动。

我不确定要定位的其他元素或可能导致此问题的原因。有没有人有建议？

网站为https://www.lekkerlimburgs.be

Answer 1

您的HTML元素上有overflow:auto，如果元素超出某些浏览器的屏幕大小，则会添加滚动条。

MDN:

  

自动
  取决于用户代理。如果内容适合内部，看起来与overflow：visible相同，但仍然建立新的块格式化上下文。如果内容溢出，Firefox等桌面浏览器会提供滚动条。

Answer 2

或者，如果您无法按照Gant的说明找到错误的来源，则可以使用浏览器开发人员工具来隔离有问题的标记。我要做的是

1. 使用浏览器开发人员工具检查格式错误的页面元素
2. 将鼠标悬停在可疑元素上并删除它们，同时注意内部滚动条。如果它消失了，那么您刚刚删除的元素就是违规撤消删除（Ctrl + Z）并进行检查。否则，即使在删除元素后滚动条仍然存在，那么刚刚删除的元素也不是罪犯。因此，请撤消删除并移至另一个元素
3. 如果有问题的元素很大/很宽，请对其子元素执行步骤2，然后迭代直到找到有问题的子元素。然后检查与引起overflow:auto
的问题的sub元素关联的css

如果您有大量的样式表并且不知道该怎么做，这种方法可能会更好

*改编自Chris Coyier Fixing Unintended Body Overflow

Answer 3

我的一个wordpress网站也遇到了同样的问题。我添加了以下CSS，为我解决了这个问题：

gitlab

似乎您正在尝试从html标签中添加CSS。为此，您将需要在html主体中添加样式标签。如果是这种情况，请使用以下代码：

body{
    width:100%;
    overflow-x:hidden;
    overflow-y:hidden;
}

希望这有帮助：）