dポイントプレゼントキャンペーン実施中！

「overflow: hidden」ペー ジ内リンクで画面がずれてしまう

締切済

  • 質問者：ijava
  • 質問日時：
  • 回答数：1件

<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>

※添付画像が削除されました。
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： MAN_MA_RUI
  • 回答日時：

そもそも何故縦スクロールバーを無効にしたいのかがわからない。


ページの見栄えにこだわって利便性を損なうのはいかがなものかと…。

この回答への補足

ご意見ありがとうございます。
なぜこうした構造のものを作りたいかは、
質問の内容と無関係と思われますので控えさせていただきます。
申し訳ありません。

補足日時：2009/04/05 15:52
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報