我正在研究網站動畫（一個旋轉的齒輪和無限地左右移動的文本）。這是我的身體碼水平動畫在CSS中導致垂直滾動條

body { 
overflow:hidden; 
height:100%; 
margin:0; 
padding:0; 
font-family:Arial, Helvetica, sans-serif; 
//background attachments 
}

，這裏是從同一個文件

#cog { /* image on maintenance.html page */ 
display:block; 
margin:auto; 
margin-top:300px; 
animation:spin 5s ease infinite; 
} 
@keyframes spin { /* animation for image on maintenance.html page */ 
from { transform:rotate(-45deg); } 
50% { transform:rotate(10deg); } 
75% { transform:rotate(-10); } 
to { transform:rotate(-45deg); } 
} 
#maintenance { /* text image under cog graphic on maintenance.html page */ 
display:block; 
margin:auto; 
/* margin-top:30px; */ 
animation:maint 5s ease infinite; 
overflow: hidden; 
} 
@keyframes maint { /* animation for second image on maintenance.html page */ 
50% { transform: translate(-200px, 0); } 
}

當文本達到其最終指向正確（或非常接近它）相關的動畫代碼片段，它導致垂直滾動條出現。而文字越靠近右側，滾動條變得越大（滾動條內的條越小）。反之亦然，當文字開始從最後的右點移動到左側時。

我已經檢查過SO post on the similar matter,the article,and another article。他們都建議做一個溢出：隱藏，但它不適用於我：我嘗試了身體和文本動畫本身。

我還注意到，只有當鼠標位於動畫容器（不只是空閒的鼠標，而是四處移動）時，該滾動條纔會出現。

它出現在我的兩個不同大小的監視器上，我使用Google Chrome進行測試。

UPDATE

試圖提示codepen和小提琴後，它看起來像一個導航欄的容器是有過錯的。我會玩弄它並分享結果。

UPDATE 2

解決了我的問題，請參閱答案。

來源

2016-07-07 Vadzim Savenok

我不確定這是否會做到這一點，但嘗試添加位置：相對於涉及溢出的每個元素。它們默認爲靜態，這可能是導致問題的原因。 – will

@ will試過了 - 它沒有解決問題。 –

任何您可以發佈工作示例的方式？ – will

將overflow:hidden僅僅應用於身體是不夠的。該行也需要應用於容器（帶有我的情況下的導航欄），該容器存在於頁面上，但不直接涉及動畫容器。

使用codepen和jsfiddle工具幫助我解決了我的問題。

希望我的回答和這些工具能夠幫助網絡設計人員在將來解決這些問題。

來源

2016-07-07 18:13:34

水平動畫在CSS中導致垂直滾動條

UPDATE

UPDATE 2

回答

相關問題