html - 处理溢出

Question

我的 body 里有这个。我不希望我的页面水平滚动，所以我设置了 overflow-x: hidden。

  html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Gravity-Regular';
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x: hidden;
}

现在问题出在我的主页上，我有一个动画效果，这个效果的css如下。

 .cbp-so-scroller {
    overflow: hidden;
 }
.cbp-so-side {
  width: 50%;
  float: left;
  margin: 0;
  padding: 48px 4%;
  overflow: hidden;
  min-height: 192px;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  -moz-transition: -moz-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

如您所见，它们将溢出更改为隐藏。当我从我的 html/body 中移除 overflow-x: hidden 时，动画工作正常，但我想将溢出设置留在那里。无论如何配置这些溢出？我试过使用 :not(.cbp-so-scroller) 但没有成功。

Answer 1

为您的动画制作一个单独的 div 并使该 div 定位固定或绝对，根据您的要求提供 overflow: hidden 和这样做:

window.onload = function () {
  document.querySelector("#main").innerHTML = "Hello, World! ".repeat(100);
  setTimeout(function () {
    document.querySelector("#anim-mask span").classList.add("anim");
    setTimeout(function () {
      document.querySelector("#anim-mask span").classList.remove("anim");
    }, 2000);
  }, 500);
};

#anim-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

#anim-mask span {
  position: absolute;
  left: -25px;
  -webkit-transition: all 5s;
  -moz-transition: all 5s;
  -ms-transition: all 5s;
  -o-transition: all 5s;
  transition: all 5s;
  background: #fff;
  padding: 10px;
  font-size: 2em;
}

#anim-mask span.anim {
  position: absolute;
  left: 1525px;
}

<div id="anim-mask"><span>Animated</span></div>
<div id="main">
  Main content flow.
</div>