Question

我正在使用CSS3在带有动画元素的网站上工作。我遇到的一个问题是垂直滚动条。所以有一个元素从左到右不断滑动：

@keyframes waves {
  0% {left:-50px;}
  50% {left: 0px;}
  100% {left: -50px;}
}

这样可以使用，对象大于屏幕大小。现在当然会出现垂直滚动条。我怎么能隐藏它？

我把元素放在一个容器中，在那里我定义了overflow-x: hidden，但不知何故它没有用。也许我只是犯了一个错误？我应该使用什么方法？

这里是小提琴： https://jsfiddle.net/hsdoy3t4/

非常感谢你的帮助。

Answer 1

因为它采用了身体标签的默认边距。

为正文标记设置margin:0。

body{
  margin:0;
}
#home {
	width: 100vw;
	overflow-x: hidden;
}

#object {
	background-image: url('http://www.1000skies.com/800trim.jpg');
	width: calc(100% + 50px);
	height: 158px;
  position: relative;
	-webkit-animation: waves 2s infinite;
    -moz-animation: waves 2s infinite;
    animation: waves 2s infinite;
}

@-webkit-keyframes waves {
  0% {left:-50px;}
  50% {left: 0px;}
  100% {left: -50px;}
}

@-moz-keyframes waves {
  0% {left:-50px;}
  50% {left: 0px;}
  100% {left: -50px;}
}

@keyframes waves {
  0% {left:-50px;}
  50% {left: 0px;}
  100% {left: -50px;}
}

<section id="home">
  <div id="object"></div>
</section>

溢出-X：隐藏不适用于动画

1 个答案: