2012-01-10 7 views
7

これは、「いいえ」ので、多分はっきりと知らされ、SO: how to move a div with arrow keysに似ていますが答えとして足りる:スクロールのdiv

は私がアップ矢印に反応する「デフォルトのスクロール目標」DIVあふれ作ることができます/ down/page-down/space オーバーフローしているドキュメントと同じ方法(つまり内容をスクロールダウン)しますか?ページ自体にスクロールバーがありません(下の簡単な例)。特に、を明示的に追跡することなく、を達成することはできますか(どちらもJSライブラリによって直接隠されることはありません)

<html> 
<body> 
    <div id="contentcontainer" style="height:200px;width:200px;overflow:scroll"> 
    <div id="innercontent" style="height:2000px;">foo</div> 
    </div> 
</body> 
</html> 

編集:もちろん私はdiv要素の中にクリックした後、上記の作品。基本的に、私はあなたのdivをスクロールダウンするには、矢印キーを使用するためには

、...

+0

は、あなたは、単にdiv要素の(http://websitetips.com/articles/css/scrollbars/)[スクロールバーのスタイル]、その上に焦点のいくつかの並べ替えを施行について考えている –

+0

はいたがdiv要素をフォーカスする必要があります。なぜあなたはただ試してみませんか、私はサイトに行って、ちょうどあふれているdivをクリックし、キーを使用しました。問題はありません...しかし、 "オートフォーカス"はあなたが達成することができません... 7 – Luke

+0

Iスタイリングについて気にしないでください。 "何らかの焦点を当てる"とは私が探しているものかもしれません...;)どうしたらうまくいくのでしょうか? – dcn

答えて

-1

ブラウザは通常、この動作がビルトインされていることを行うことを避けるためにしたい、あなたは集中内の要素を持っている必要があります。

検索http://api.jquery.com/focus/

+3

div内のフォーム要素で '.focus()'を実行した後でも、divは矢印キーのスクロールキーストロークのターゲットとして認識されません。 –

9

フォーカス可能にするHTML要素のためには、それは、Tabキーで到達可能でなければなりません。つまり、.focus()をリンクまたは入力に呼び出すことができます。さらに、body要素は常にフォーカス可能です。

Tabキーでdivに到達できるようにする必要があります。これを行うには、tabindexプロパティを設定します。実際に人々がそのdivにタブできるようにしたい場合は、tabindexを-1に設定すると、実際にタブでタブイングされるのを防ぎますが、そうでなければタブアップとフォーカスの要素を設定します。

出典:http://help.dottoro.com/ljpkdpxb.php

+1

divにtabindex属性があり、div.focus()が呼び出されたことを確認した後、それは機能しました!ありがとう! – Josh

関連する問題