ウィンドウが特定の幅でオーバーフローしているときに水平スクロールを許可する：x：hidden

Question

私はウェブサイトを作成していて、フルスクリーンで横スクロールしないようにするために、 。

私が尋ねたかったのは、ユーザーがウィンドウを600px幅以下にサイズ変更した後、再び水平スクロールを許可する方法がある場合です。

ありがとうございました。ありがとうございました！

Answer 1

はい、あなたはオンザフライメディアクエリにoverflow-xの値を切り替えることができます

@media (max-width: 600px) { 
    body { 
     overflow-x: auto; 
    } 
} 

は、あなたのスタイルシートで後にメインbodyルールをこの@mediaルールを配置するようにしてください、そうでない場合はyour overflow-x: hidden declaration will always take precedence 。

注意また、そのwidthメディア機能は、ビューポートの幅に対応し、body要素がoverflow-xを設定し、この方法は実際には、ビューポート上のスクロールバーには影響していない、ないビューポートと同じものである一方、 body要素です。これは、body要素が通常よりも狭い場合でも、または既定の余白を削除していない場合でも（作成者が通常行うように）、期待どおりに機能することを意味します。これはintentional behaviorですが、状況によっては上書きされる可能性があります。

Answer 2

あなたは、応答性のCSS

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

以下は、CSS

@media only screen and (max-width: 600px) { 
body{overflow-x:auto} 
} 

Answer 3

はメタタグやCSSの下に追加されできるように、あなたのページにメタタグの下に追加のメディアクエリー

を使用することができますあなたのページ

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

CSS

body { 
overflow-x:hidden; 
} 
.test { 
width:auto; 
} 
@media screen and (max-width:600px) { 
body { 
overflow-x:auto; 
} 
.test { 
width:600px; 
} 
} 

HTML

<div class="test"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor nulla id lorem tristique maximus. Donec quam massa, suscipit ut sem in, pretium porttitor lacus. Cras ac venenatis neque. Integer vulputate nibh libero, quis placerat dolor accumsan sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum metus interdum vestibulum tincidunt. Nullam pellentesque at quam congue maximus. Vivamus eget mollis risus, ac bibendum turpis. Suspendisse at hendrerit nibh. Vestibulum vestibulum rhoncus augue non pulvinar. Nunc rutrum sapien eu mollis pretium.</div>