在动画CSS上隐藏滚动条

Question

我已经尝试了所有overflow类型无济于事。当滑动div向右滑动并缩小时，水平滚动条仍然存在！

.wrapper {
    width: 100%;
}
#slide {
    position: absolute;
    left: -40px;
    background: black;
    -webkit-animation: slide 5s forwards;
    -webkit-animation-delay: 0s;
    animation: slide 5s forwards;
    animation-delay: 0s;
	zoom: 1.1;
	-moz-transform: scale(1.1);
	width: 100%;
	height: 400px;
}

@-webkit-keyframes slide {
    100% { left: 40px; zoom: 1; -moz-transform: scale(1); }
}

@keyframes slide {
    100% { left: 40px; zoom: 1; -moz-transform: scale(1); }
}

<div class="wrapper">
    <div id="slide"></div>
</div>

Answer 1

在包装器上设置transform: translateZ(0)可以修复溢出问题 - 也许它与创建新堆叠上下文的转换有关。

现场演示：

＆＃13;

＆＃13;

html, body {
  margin: 0;  
}

.wrapper {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  transform: translateZ(0);
}
#slide {
    position: absolute;
    left: -40px;
    background: black;
    -webkit-animation: slide 5s forwards;
    -webkit-animation-delay: 0s;
    animation: slide 5s forwards;
    animation-delay: 0s;
	zoom: 1.1;
	-moz-transform: scale(1.1);
	width: 100%;
	height: 400px;
}

@-webkit-keyframes slide {
    100% { left: 40px; zoom: 1; -moz-transform: scale(1); }
}

@keyframes slide {
    100% { left: 40px; zoom: 1; -moz-transform: scale(1); }
}

＆＃13;

<div class="wrapper">
    <div id="slide"></div>
</div>

＆＃13;

＆＃13;

＆＃13;