斜めのフルスクリーンレイアウトで水平スクロールバーを取り除くにはどうすればよいですか？

オーバーフローする水平スクロールバーを取り除く方法を教えてください。私はCSS3を使って2つの斜めの形を持っています。私は右のものすべてを試しましたが、何も動作しません。私はオーバーフローを置く：隠された。斜めのフルスクリーンレイアウトで水平スクロールバーを取り除くにはどうすればよいですか？

div.rightを調整して水平スクロールバーを突き止めない方法はありますか？

私はそれがノーオブの間違いだと確信していますが、別の目が必要です。

.row { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 

 
.left{ 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: #ff9a00; 
 
    position: absolute; 
 
    display: block; 
 
    left: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
} 
 

 
.right { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    display: block; 
 
    right: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
    overflow: hidden; 
 
}

<div class="dual-screen"> 
 
     <div class="row"> 
 
     <div class="left"></div> 
 
     <div class="right"></div> 
 
     </div> 
 
    </div>

出典

2017-09-01 PandaNinja

誤った要素にoverflow：hiddenを適用しているかもしれませんが、class = "row"を使ってdivにオーバーフロールールを適用してみてください。子がオーバーフローするのを隠すコンテナにオーバーフローを適用する必要があります。 –

応答いただきありがとうございます。 – PandaNinja

あなたが探しているのはあなたの含む要素の1つにoverflow-x: hiddenを追加することです。
この要素は少なくとも1つのレベルでなければなりませんupから.dual-screenまでです。

overflow-xは、オーバーフローを制御します。は、水平方向にです。
hiddenに設定すると、このオーバーフローが非表示になり、スクロールバーが表示されなくなります。次の例では

、私は<body>にそれを追加しました：

body { 
 
    overflow-x: hidden; 
 
} 
 

 
.row { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 

 
.left { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: #ff9a00; 
 
    position: absolute; 
 
    display: block; 
 
    left: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
} 
 

 
.right { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    display: block; 
 
    right: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
    overflow: hidden; 
 
}

<div class="dual-screen"> 
 
    <div class="row"> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    </div> 
 
</div>

は、この情報がお役に立てば幸い！ :)

出典

2017-09-01 03:09:38

ありがとうございます！オーバーフローを置く - x：隠し;体の上でそれを修正するが、私はそれが突き出るのを防ぐために私はdivクラスを調整することができたと思っていた。それを行う方法はありますか？ – PandaNinja

残念ながら。このような「角度のついた」要素の一般的な概念は、それらを突き抜けさせ、それを隠すために親に 'overflow：hidden'を使用することです。 –

ダン。さて、それは意味をなさない。それを指摘していただきありがとうございます。私は何かを学んだ。 – PandaNinja

斜めのフルスクリーンレイアウトで水平スクロールバーを取り除くにはどうすればよいですか？

答えて

関連する問題