Question

我有这个代码的问题，问题是在1200px之前一切正常但是在1218px之前重新调整到1200px以及（在滚动条的宽度之前，例如chrome滚动条宽度为17px）之后，我们将看到不需要的水平滚动条让我们烦恼。

我想解决这个问题，但我不知道如何解决。谁知道怎么样？所以请指导我。

我的代码链接和在线测试：
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100

我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<div class="header">
    <div class="inner-header">header</div>
</div>

<div class="body">body</div>

<div class="footer">
    <div class="inner-footer">footer</div>
</div>

</body>
</html>

我的css：

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 30px;
    text-align: center;
}

body{
    background-color: orange;
}

.header{
    border-bottom: 1px solid black;
}

.inner-header{
    background-color: black;
}

.body{
    height: 3000px;
    background-color: blue;
}

.footer{
    border-top: 1px solid black;
}

.inner-footer{
    background-color: green;
}

.header,
.footer{
    width: 100%;
    height: 100px;
}

.inner-header,
.inner-footer{
    height: 100%;
}

.inner-header,
.body,
.inner-footer{
    width: 1000px;
    margin: 0 auto;
}

@media screen and (min-width: 1200px){
    .inner-header,
    .body,
    .inner-footer{
        width: 1200px;
    }
}

Answer 1

我无法推荐它，但您可以在overflow-X:hidden元素上使用body（而不是类.body *的元素）。不管怎样你都不需要在容器两侧看到任何东西......对吗？

^{*你真的不应该在课堂上使用这个名字，这会让你感到不必要的混淆。}

@media screen and (min-width: 1200px) {
  body {
    overflow-X: hidden;
  }
  .inner-header,
  .body,
  .inner-footer {
    width: 1200px;
  }
}

理想情况下，您应该调整设计以适应这一点。在计算视口宽度时，不同的浏览器会以不同方式处理滚动条。

Codepen Demo

Answer 2

您可以从宽度更改.inner-footer：1000px到max-width：1000px;这将解决问题。

Answer 3

我知道这是一个老问题。但是我想分享这个，跳跃某人会觉得它很有用并且可以节省某人的一天。

所以，没有快速的方法，你将不得不做一些挖掘，并发现自己导致溢出的元素。因此，在您的屁股中创建不需要的水平滚动和疼痛。通常一种方法是写

body {
  overflow-x: hidden;
}

并希望body上的overflow-x将删除该水平滚动条，但有时您必须将overflow:hidden应用于该站点的主容器。这可能在所有时间或大多数时间都有效。等，

.main_container {
  overflow: hidden;
}

有一些技巧可以帮助您找到那些溢出元素，例如使用下面的JavaScript脚本，只需打开控制台并在那里执行

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

或者你可以执行jQuery one，

$.each( $('*'), function() { 
    if( $(this).width() > $('body').width()) {
        console.log("Wide Element: ", $(this), "Width: ", $(this).width()); 
    } 
});

或者你可以使用这个小jquery片段。它将沿着元素宽度直接在控制台中注销元素，这可以帮助您在控制台中悬停时轻松突出显示它们（至少在Chrome中）。

 $.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;

或者如果你仍然找不到那个特定的元素，请使用下面的技巧，

//Open inspector -> “New Style Rule”:
    * {
        outline: 1px solid red;
    }

如果您认为自己可能有隐藏元素，则可以随时添加opacity: 1 !important; visibility: visible !important;，但通常上述工作无需额外工作。

希望它有所帮助。快乐挖掘。

Answer 4

在这里你可以改变代码。 overflow-x: hidden;隐藏在水平滚动条中。

body{
    background-color: orange;
    overflow-x: hidden;
    overflow-y: scroll;
}

Answer 5

您可以通过多种方式解决此问题 - 其中一种方法是将您的width: 1000px更改为max-width: 1000px

另一种可能只是使用一些-webkit前缀来设置/隐藏滚动条。不会因多个UX原因推荐此路由，但如果您想阅读样式滚动条 - 请查看this resource。

最后，您可以使用overflow-x专门定位x轴滚动条，并通过将其设置为hidden来删除/隐藏它。再次 - 这种方法不是最好的。如果没有滚动条，用户如何知道内容不在页面中？

Answer 6

我很容易解决。如果您定义最小宽度媒体查询=宽度+滚动条宽度（例如在chrome中为17px或在opera中为15px，但肯定我们说为20px）问题将得到解决。

新的代码链接：

codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100

如何通过媒体查询消除重新调整大小窗口上不需要的水平滚动条？

6 个答案: