Question

如何摆脱溢出水平滚动条？我有两个使用CSS3的对角线形状。我已经尝试了一切正确但没有任何作用。我甚至把溢出：隐藏。

有没有办法我可以调整div .right所以它不会引出水平滚动条？

我确定这是一个noob错误，但我需要另一双眼睛。

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.left{
    width: 100%;
    height: 500px;
    background-color: #ff9a00;
    position: absolute;
    display: block;
    left: -50%;
    z-index: 3;
    transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
}

.right {
    width: 100%;
    height: 500px;
    background-color: blue;
    position: absolute;
    display: block;
    right: -50%;
    z-index: 3;
    transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
    overflow: hidden;
}

<div class="dual-screen">
      <div class="row">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>

Answer 1

您正在寻找的是将 overflow-x: hidden 添加到您的某个包含元素中。
此元素必须至少为.dual-screen的向上级别。

overflow-x控制溢出水平将其设置为hidden会隐藏此溢出，因此滚动条不可见。

在以下示例中，我已将其添加到<body>：

＆＃13;

body {
  overflow-x: hidden;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.left {
  width: 100%;
  height: 500px;
  background-color: #ff9a00;
  position: absolute;
  display: block;
  left: -50%;
  z-index: 3;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

.right {
  width: 100%;
  height: 500px;
  background-color: blue;
  position: absolute;
  display: block;
  right: -50%;
  z-index: 3;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  overflow: hidden;
}

＆＃13;

<div class="dual-screen">
  <div class="row">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

＆＃13;

希望这有帮助！：）

如何在对角线全屏布局中摆脱水平滚动条？

1 个答案: