- 締切済み
「overflow: hidden」ペー ジ内リンクで画面がずれてしまう
<body>に「overflow: hidden」を指定してスクロールバーを非表示にし、 領域<div class="scroll">内のみスクロールさせる「擬似フレーム」的（？）なものをつくりました。 そして、<div class="scroll">の中をクリックで移動するためのアンカーリンクを設けました。 ブラウザのウィンドウサイズが十分に大きい場合は問題ないのですが、 ウィンドウサイズが小さい（本来なら縦スクロールが必要になるサイズ）場合、 リンククリックで画面内が上にピッとずれてしまいます。 <body>に「position: fixed」を指定すればFirefox等では解決しますが、IEではダメです。 このズレを防ぐ方法はないものでしょうか。 以下サンプルソースです。 <html> <head> <style type="text/css"> <!-- body { overflow: hidden; /*---↓Firefox等でOK、IEはダメ------- position: fixed; top: 0px; -----------------------------------*/ } .scroll { overflow: auto; height: 200px; background: #CCCCCC; padding: 10px; } --> </style> </head> <body> <h1>ページ内リンクによる「scroll」と「overflow: hidden」 </h1> <ul> <li><a href="#topic1">その1＞＞ </a></li> <li><a href="#topic2">その2＞＞ </a></li> <li><a href="#topic3">その3＞＞ </a></li> </ul> <div class="scroll"> <div id="topic1"> <h2>その1</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic2"> <h2>その2</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic3"> <h2>その3</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> </body> </html>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
そもそも何故縦スクロールバーを無効にしたいのかがわからない。 ページの見栄えにこだわって利便性を損なうのはいかがなものかと…。
補足
ご意見ありがとうございます。 なぜこうした構造のものを作りたいかは、 質問の内容と無関係と思われますので控えさせていただきます。 申し訳ありません。