は、私は携帯電話のメニューを作ってみるスクロールバー

Question

を作る正の値に変換し変換します。 右のものはコンテンツエリアトランスフォーム（translateX（-200px））を与えます。 左のものはコンテンツ領域の変換を与えます：translateX（200px）;

負の（ - ）値は、スクロールバーの水平スクロールバーを作成しません。 しかし、正の値はしません。誰にでもこの問題の解決策がありますか？

私はオーバーフローの周りにdivを与えようとしました。しかし、これは私にとってはうまくいかなかった。

Answer 1

body要素の水平スクロールバーがoverflow-x: hiddenであるのを防ぐことができます。開発ツールを使ってブラウザで正しく試して、完璧に動作しました。

Answer 2

私はまったく同じ問題を抱えていました。最後に、translateXを使用してメニューをスクロールさせないようにしました。代わりにscaleを使用しました。

あなたのサイトはもう見えませんが、おそらくこれはあなたが移行することでメニューが表示されるようにやったことです：

translateX(-200px) - >translateX(0)

I変換やや似て達成するためにスケールを使用：

scale(0,1) - >scale(1,1)

.menu { 
    transition: transform 150ms ease-in-out; 
    transform-origin: top right; 
    transform: scale(0,1); 
} 

.menu.open { 
    transform: scale(1,1); 
} 

はいアニメーションには違いがありますが、ほとんどのユーザーがそれが速く起こっていると認識されていない可能性もあります。

オーバーフロー操作は必要ありません。