オーバーフローの処理

Question

私の体にはこれがあります。オーバーフローx：hiddenを置くように私のページに水平スクロールを持たせたくありません。

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

このように、オーバーフローが隠されていることがわかります。 overflow-xを取り除くと、html/bodyから隠されたアニメーションは正常に動作しますが、そこにオーバーフロー設定を残したいと思います。これらのオーバーフローを設定する方法はありますか？私は使ってみました：not（.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>