使用溢出

Question

在我的身體，我有這個。我不希望我的頁面有水平滾動，所以我把溢出x：隱藏。

html, body{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font-family: 'Gravity-Regular'; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    overflow-x: hidden; 
} 

現在的問題出在我的主頁上，我有一個動畫效果和CSS效果如下。

.cbp-so-scroller { 
    overflow: hidden; 
} 
.cbp-so-side { 
    width: 50%; 
    float: left; 
    margin: 0; 
    padding: 48px 4%; 
    overflow: hidden; 
    min-height: 192px; 
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; 
    -moz-transition: -moz-transform 0.5s, opacity 0.5s; 
    transition: transform 0.5s, opacity 0.5s; 
} 

因此，你可以看到他們改變溢出隱藏。當我從我的html/body中取走overflow-x：hidden時，動畫工作正常，但我想離開溢出設置。無論如何要配置這些溢出？我試過使用：不是（.cbp-so-scroller），但沒有運氣。

Answer 1

有你的動畫獨立div並作出div定位成固定的或絕對的，給予overflow: hidden，可根據您的要求，這樣來做：

window.onload = function() { 
 
    document.querySelector("#main").innerHTML = "Hello, World! ".repeat(100); 
 
    setTimeout(function() { 
 
    document.querySelector("#anim-mask span").classList.add("anim"); 
 
    setTimeout(function() { 
 
     document.querySelector("#anim-mask span").classList.remove("anim"); 
 
    }, 2000); 
 
    }, 500); 
 
};

#anim-mask { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
#anim-mask span { 
 
    position: absolute; 
 
    left: -25px; 
 
    -webkit-transition: all 5s; 
 
    -moz-transition: all 5s; 
 
    -ms-transition: all 5s; 
 
    -o-transition: all 5s; 
 
    transition: all 5s; 
 
    background: #fff; 
 
    padding: 10px; 
 
    font-size: 2em; 
 
} 
 

 
#anim-mask span.anim { 
 
    position: absolute; 
 
    left: 1525px; 
 
}

<div id="anim-mask"><span>Animated</span></div> 
 
<div id="main"> 
 
    Main content flow. 
 
</div>