css - 绝对定位导致水平滚动

Question

我有一个云，它通过 CSS3 动画从屏幕内部移动到屏幕外。当云离开屏幕时，屏幕会水平滚动，这并不理想。我可以使用 CSS 隐藏滚动条，但我想阻止滚动。

#c-2 {
background:url(clouds.png) no-repeat;
width:161px;
height:94px;
position:absolute;
top:40%;
right:0%;
animation:CloudB 20s 1s infinite alternate ease-in-out;
-moz-animation:CloudB 20s 1s infinite alternate ease-in-out;
-webkit-animation:CloudB 20s 1s infinite alternate ease-in-out;
-o-animation:CloudB 20s 1s infinite alternate ease-in-out;
}

@keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-moz-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-webkit-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-o-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

http://energycenter.herokuapp.com/

Answer 1

试试这个 - http://jsfiddle.net/m3af2/

body {
    background-color: #99CCE8;
    margin: 0;
    line-height: 1;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}