CSS - 在使用關鍵幀動畫時隱藏x軸上的滾動條

Question

我想放大我的背景圖片。我爲這個問題做了一個div，並將其設置爲z-index -1。它需要有position:absolute以便其他部分和動畫在頁面上正常工作。 現在唯一發生的事情是，當圖像被放大時，會在底部創建一個水平滾動條。我怎樣才能擺脫這一點，我已經嘗試過溢出：hidden和overflow-x：hidden並將其設置爲diplay：block並顯示：inline-block，因爲我看到它是在SO上建議的，但它沒有工作。

這是該分區的CSS：

#bg { 
    background-image: url('/img/cover.png'); 
    background-size: cover; 
    display: inline-block; 
    z-index: -1; 
    animation: zoom 10s; 
    height: 100vh; 
    width: 100vw; 
    animation: zoom 10s; 
    position: absolute; 
    overflow: hidden; 
    overflow-x: hidden; 
} 

@keyframes zoom { 
    0% { transform:scale(1,1); } 
    100% { transform:scale(1.1,1.1);} 
} 

和HTML：

<div id="app"> 
    <div id="bg"> 
    </div> 

     <div id="main-section"> 
     </div> 

    </div> 

    <div id="drawer"> 

     <div id="magazine-detail"> 
     </div> 

     <div id="magazine-detail-carousel"> 
     </div> 

    </div> 

    <div class="large-10 large-centered columns content"> 
    </div> 

    </div> 

更新

我刪除水平滾動條完全被設置：

html, body { 
    ... 
    overflow-x: hidden; 
} 

Answer 1

http://jsfiddle.net/ryanbrill/mdb7X/

**You can try this one if it will work for you or other i will correct your code also ** 

Answer 2

二試試:)
您可以通過標註你的動畫元素考慮它的最終大小來避免滾動條（使用overflow*: hidden）（我的意思是考慮到它的大小時，這將是最高和最寬的，這是在這裏的動畫）

筆的末端：http://codepen.io/PhilippeVay/pen/RGOzar

如果它可以是+ 50％，寬兩倍高，則寬度在三分之二和高度在視口的一半定義。 66％* 1.5 = 100％和50％* 2 = 100％，沒有滾動條:)

#bg { 
 
    background-image: url('/img/cover.png'); 
 
    background-size: cover; 
 
    display: inline-block; 
 
    z-index: -1; 
 
    height: calc(100vh/2); 
 
    width: calc(100vw/1.5); 
 
    animation: zoom 6s infinite; 
 
    position: absolute; 
 
    transform-origin: left top; 
 
} 
 

 
@keyframes zoom { 
 
    0% { transform:scale(1, 1); } 
 
    100% { transform:scale(1.5, 2);} 
 
}

<div id="app"> 
 
    <div id="bg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, sit omnis modi facere architecto veritatis odio quod sed necessitatibus? Libero doloribus deleniti beatae in facilis animi, aspernatur blanditiis obcaecati illo. 
 
    </div> 
 

 
     <div id="main-section">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis harum saepe nam ratione, sint cum ea repellat ipsam quod sunt nisi officiis temporibus eveniet accusantium animi modi omnis! Eius, est! 
 
     </div> 
 

 
    </div> 
 

 
    <div id="drawer"> 
 

 
     <div id="magazine-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto iure aliquid incidunt modi culpa est iusto exercitationem, quaerat ab reiciendis nobis, unde corporis mollitia eius molestiae! Tempore sit vitae modi. 
 
     </div> 
 

 
     <div id="magazine-detail-carousel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur odit aliquam incidunt omnis ipsa tempore, error explicabo. Non, nam veritatis quae excepturi provident dolore doloremque tempore minus alias aliquid. 
 
     </div> 
 

 
    </div> 
 

 
    <div class="large-10 large-centered columns content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, soluta rerum quasi libero pariatur tempora tenetur ipsam repellendus fuga, ea illo doloribus natus aliquam. Labore vero atque nostrum, consequuntur nobis. 
 
    </div> 
 

 
    </div>