人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSS/javascrip に詳しい方への質問です。

インラインフレームを使わずスクロール画面をはめ込んでいます。

<div style=”overflow-y:scroll; height:40px;width:100px;”>
<p>
top<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
bottom<br>
</p>
</div>


たとえば上記のようなHTMLを表示させた場合、スクロールバーは最上部が表示されるよう一番上に位置しています。

これを、表示したときに最下部が見える状態にしたい(スクロールバーを最下部にもっていきたい)のですが、よい方法を教えてください。

よろしくお願いします。

●質問者: yoski
●カテゴリ:ウェブ制作
✍キーワード:AAA br CSS HTML TOP
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● jippu
●10ポイント

要は、上記の「bottom」が表示されるようになればよいのでしょうか。

だとしたら、「bottom」にアンカーをつけ、


<a href=”#bottom”>bottom</a>


onLoadでそこへジャンプさせれば良いかと思います。


<body onload=”go_bottom()”>


Javascriptの関数の中身は


function go_bottom(){

location.hash = ”bottom”;

}


といった感じで。


見当違いでしたら申し訳ございません。

◎質問者からの返答

なるほど、ありがとうございます。これでも実現できそうですね。

DHTMLで動的に書いているものなので、できればアンカーをつけずに処理する方法もお待ちしています。


2 ● Mars
●40ポイント

例)WinIE6とFirefox1.5で確認済。


<html><head><title></title>

<script type=”text/javascript”>

<!--

function go_bottom(targetId){

O = document.getElementById(targetId);

if(! O) return;

O.scrollTop = O.scrollHeight;

}

//-->

</script>

</head>

<body onload=”go_bottom(’area01’)”>

<div style=”overflow-y:scroll;height:40px;width:100px;” id=”area01”>

<p>

top


aaa


aaa


aaa


aaa


aaa


bottom


</p>

</div>

</body>

</html>

◎質問者からの返答

ありがとうございます!


3 ● jippu
●30ポイント

http://www.openspc2.org/JavaScript/ref/window/scroll.htm

scroll

bottomというマーキングでなく“最下部に”ということであれば、scroll関数が使えます。


scroll(0, innerHeight);


などとすれば、ウィンドウ内枠の高さ分までスクロールさせることができます。


詳しそうな方ですので、関数とURLだけで失礼します。

◎質問者からの返答

ありがとうございました!


4 ● Mars
●20ポイント

二回に分けてしまってすいません。

overflow-y:scroll;

overflow:auto;

に変更すればOperaとか他のブラウザでも動くと思います。

overflow-yはIEの独自拡張なので(Firefoxも1.5から対応しましたが)

◎質問者からの返答

おお、そうだったのですね。ありがとうございます!


5 ● suVene
●20ポイント

div タグに id をつけ、エレメントを取得し

カレントスクロールのTOPを高さに割当てます。


function _onload() {

var el = document.getElementById(’target’);

el.scrollTop = el.scrollHeight;

}

◎質問者からの返答

みなさん、ありがとうございました

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ