使用溢出

Question

在我的身体里，我有这个。我不希望我的页面有水平滚动，所以我把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时，动画工作正常，但我想在那里留下溢出设置。无论如何配置这些溢出？我尝试过使用：不是（.cbp-so-scroller）但是没有运气。

Answer 1

为您的动画设置单独的div，并将div定位为固定或绝对，根据您的要求提供overflow: hidden，并按照以下方式执行：

＆＃13;

＆＃13;

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);
};

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;