私は私の問題の解決策を探しています。私はあなたのページを垂直にスクロールするようにうまくいくように見える私のサイトにCSSの視差効果があります。問題は、ブラウザウィンドウの幅がページコンテンツの幅より小さくなると、水平方向にもスクロールすることです。私はパララックス効果を水平にしたくありません。私が使用しているCSSは次のとおりです。視差効果 - 縦スクロールのみ

background: url(images/home.jpg) 50% 0 no-repeat fixed; 
height: 500px; 
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative;

サンプルサイトは、ブラウザのウィンドウが1000px未満の場合は、水平スクロールバーが表示され、右側に濃いグレーの番組ページの背景色http://bantamgraphics.com/parallax/です。水平スクロールをブロックする方法はありますか？

出典

2016-04-18 Stephen

ボディに 'overflow-x：hidden'を追加することはできますか？ –

Mikeさん、ありがとうございました。ページ全体に水平スクロールバーができないようにしています。私は画像領域がスクロールしないようにしたいと思っていますが、これは一時的な解決策かもしれません。オーバーフローx：hiddenを#home記事スタイルだけに追加しようとしましたが、それもうまくいかなかった。 – Stephen

その場合、その画像の親コンテナに同じCSSルールを追加できます。幅の設定：100％、overflow-x：hidden。 –

インラインの幅が1000pxに設定されているアイテムがいくつかあります。そのため、そのブレークポイントの下に水平スクロールが表示されています。

<div style="width:1000px; height: 93px;" align="center" id="topnav">

と...

<table width="1000" border="0" cellspacing="0" cellpadding="0">

はまた、あなたのテーブルに次の4つのセクションを持っているの下に。これらの4つのボックスの幅はそれぞれ230pxなので、230×4 = 920pxと両側に設定した40pxのパディング（合計1000px）は、画面が , 1000px未満の場合のビューポートを上回ります。

4つの等ボックスセクションの表よりも少し流動的なものを使用することをお勧めします。

出典

2016-04-18 16:51:27

Shawnさん、ありがとうございます。しかし、視差の下に1000pxで固定するコンテンツが必要な場合があります。だから私は視差効果を垂直にするだけのスタイルや別の方法を探しています。 – Stephen

問題の解決策を見つけました。各水平divにmin-widthを追加することで、サイトはコンテンツの横方向にスクロールしなくなりました。

sitewrapper {min-width：1000px;}

出典

2016-04-27 18:22:58 Stephen

視差効果 - 縦スクロールのみ

答えて

sitewrapper {min-width：1000px;}

関連する問題