DIVオートスクロール

Question

divには多数の項目があります。私はこれらの項目をボタンをクリックして動的に選択します。私の場合はオーバーフローが自動的に発生します。私が欲しいのは、表示されていない項目が選択され、divをスクロールして表示できるようにすることです。これどうやってするの？

Answer 1

あなたは、その内容がでスクロールさ量を設定するのHTMLElementのscrollTopプロパティを使用することができます。

そしてスクロールする要素のoffsetTopからスクロールする必要がある量を得ることができます。このHTMLと例えば

：

<div id="container"> 
    <p id="item-1">foo</p> 
    <p id="item-2">bar</p> 
    <p id="item-3">baz</p> 
</div> 

あなたは第三段落にコンテナのdivをスクロールするために、このJavaScriptを使用することもできます。

document.getElementById("container").scrollTop = document.getElementById("item-3").offsetTop; 

Answer 2

ボタンがクリックされ、選択されたアイテムがこの選択されたアイテムのfocus（）メソッドを呼び出したとき。これはあなたの要素に自動スクロールが発生します。

<div style="height:80px; overflow:auto;"> 
    <input type="text" id="id1"><br><br> 
    <input type="text" id="id2"><br><br> 
    <input type="text" id="id3"><br><br> 
    <input type="text" id="id4"><br><br> 
    <input type="text" id="id5"><br><br> 
    <input type="text" id="id6"><br><br> 
</div> 
<input type="button" onclick="document.getElementById('id6').focus();"> 

Answer 3

さらに別のオプションは、プラグインScrollToとともにjQueryを使用することです。

Answer 4

DIVのscrollTopまたはscrollLeftプロパティを使用することもできます（スクロールが水平か垂直かによって異なります）。

私は以前これを行っていて、setTimeoutイベントを使用して1モーションではなく流動的にスクロールさせました。これはJQueryのないthoです。

Answer 5

さらに別のオプション...アンカー。

各項目に一意のIDを割り当て、あなたが特定の項目にスクロールしたいとき、次のJavaScriptコードを実行：itemIDは要素のIDを含む変数です...

location.hash = itemID; 

をあなたはスクロールしたい。

スティーブ