<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
"mailtoでメールの【氏名】【性...
-
bodyにidをつける理由は何ですか?
-
bodyタグって2重にしようするこ...
-
googleモバイルがiframeで表示...
-
htmlで任意の行の文字位置を右...
-
背景が流れる(スクロールする...
-
日本語を半角英数字にすると画...
-
テキストボックス内にハイパー...
-
<a href="#" …>の意味を教えて...
-
javascriptファイルは1つに統...
-
HTMLソースからURLだけを抜き出...
-
javascriptとApacheの設定
-
「jQuery」アニメーションをル...
-
SCRIPT5007: 未定義または NULL...
-
window.open でExcelファイルを...
-
【Google Apps Script】「ライ...
-
左右のフレームを同時にスクロ...
-
一つの行にURLが複数ある場合の...
-
Dreamweaver で 外部JSを読み込...
-
変数の代入値を外部の.txtファ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
ハイパーリンクに下線を表示す...
-
(Javascript)印刷するファイル...
-
テキストボックス内にハイパー...
-
"mailtoでメールの【氏名】【性...
-
別ページのページ内リンクでの...
-
iframeのsrcにページ内リンク(...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
bodyタグって2重にしようするこ...
-
リンクをクリックすると文字が...
-
複数のiframeの読み込みについて
-
「overflow: hidden」ペー ジ内...
-
横スクロールを右から左へ・・・
-
HTML文でiframe srcで参照表示...
-
スクロールバーのスクロール量...
-
Chromeがiframe内の「#~」に釣...
-
テキストをクリックすると答え...
-
<HR>タグでつくる四角形につい...
-
日本語を半角英数字にすると画...
おすすめ情報