2011-01-24 5 views
1

基本的には、画面の右端まで(オーバーフローなし)実行するための分割線を取得しようとしています。divを画面の右側に実行するようにする

ここをクリックしてhttp://gomysites.comを表示し、twitterセクションまでスクロールすると、twitterパネルが画面の左端に表示されます(サイズに関係なく)。

今、私は正しいことを正確にしたいと思います。あなたがブログの間の灰色の仕切りに気付いたら、水平スクロールを追加せずに画面の右端まで(大きさに関係なく)実行するようなIDを投稿します。

私は忍び笑いパネルのためにしたように私は全く逆の除算器のCSSを設定しようとしました:

.widget_gomy_news .divider{ 
margin:30px -10000px 30px 0; 
background:#f3f3f3; 
height:30px; 
float:right; 
width:610px; 
padding:0 10000px 0 0; 
} 

しかし、それは、水平スクロールバーを追加します。だから私はオーバーフローを追加しようとした:隠された;体にこれは、スクロールを削除しますが、私はまだマウスで左右のすべてをスクロールすることができます。

誰でも私が何を達成することができますか?または私はこの仕事をするためにいくつかのjsを使用する必要がありますか?

ありがとうございます。

+0

あなたは既に持っているものの例を教えてもらえますか?それから、Firebugを使って問題を見て、ライブページで解決しようとするかもしれません。 – 2ndkauboy

+0

問題のページに上記のリンクを追加しました。私は今分かりやすいように仕切りを設定します...あなたはそれがページに横スクロールバーを追加することに気付くでしょう(私は望みません)。 –

答えて

0

右端の-10000pxと右端の10000pxのパディングを削除するだけです。何のためにそれが必要ですか?

+0

マージン+パディングを削除すると、次のようになります。http://gomysites.com/1.jpg(これは正しい)私はそれを見たいと思っています:http://gomysites.com/2.jpgディバイダは右側の画面の端まで走ります(オーバーフローなし)。ツイッターパネルのように、左側にあります。 –

+0

"overflow-x:hidden"をボディに追加すると、FFとChromeで水平スクロールバーが表示されません。 – 2ndkauboy

+0

ああ、私の答えを掲載する前にあなたのコメントを見ていない、そのカウについて申し訳ありません。 –

0

body要素にoverflow-x: hiddenを使用してください。これは水平スクロールを防ぎますが、IE8とChromeでテストされたIEの古いバージョンではあなたをトリップする可能性があります。

編集:また、のようなウィンドウのビューポートの高さ/幅つかむためにいくつかのjQueryを書くことができ

$(window).height();を、サイズあなたの全体のページの「コンテナ」は、それに応じDIV。これにより、あなたの "ディバイダ"ハックの負の/位置マージンを設定するためにどの数字を使っているのかを知ることができます。

+0

はい、私はすでにそれを試して、はい、水平スクロールを削除しますが、私はまだマウスで左右にスクロールすることができます。 –

+0

これは奇妙です。マウスでのサイドスクロールはChromeでは行われませんが、IE/FFで行われます。 –

+0

しかし、4Dスクロールホイールを搭載していて、誤って横にスクロールしているユーザーがマウスで横方向にスクロールできれば、どうなるでしょうか? – 2ndkauboy

0

私はそれを分類したと思います。私はdivの中にすべてのページコンテンツをラップし、(ボ​​ディではなく)それに隠されたオーバーフローを追加しました。これはIE7以外のすべてで機能しましたが、私はIE7のための簡単な回避策を行うことができます。すべての返信をありがとう、ジェフは私に正しい道を教えてくれました。

関連する問題