導致水平滾動的絕對定位

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