JSやjQueryの - スクロール可能なdiv要素の表示可能領域を取得

Question

私は現在、動的に移入され、スクロール可能なdiv要素を持っている。
私は一度に選択された一人の子供を持っている上矢印と下矢印キー入力をキャプチャし、親のdiv内のクラスを変更する機能を持っています （基本的に、これは選択入力を模倣する）

ここで私が何をしたいです。 私は最近、「選択」の子供を表示する（ダウンしたりアップ）を変更するのdivの表示可能領域が必要ですが、その子は親の表示可能領域内に存在しない場合にのみます。

私は何とか親のdivのscrollHeightとの関係で表示可能領域を取得する必要があります...しかし、私はこれを行う方法を確認していないので...

また、私は親のdivの表示可能領域を設定する方法がわからないです。

すべてのヘルプをいただければ幸いです！

Answer 1

いやはや、

それを考え出しました

まず、私は

を経由して、表示可能領域を取得します

var viewableTop = $("#parentDiv").scrollTop;
var viewableBottom = $("#parentDiv").innerHeight() + $("#parentDiv").scrollTop;

これviewableTopとviewableBottomの間に何が閲覧可能です。しかし、本当にあなたはそれを知っている必要はありません。代わりに、あなたは以下の知っている必要があります。

//getting child position within the parent
var childPos = $("#childDiv").position().top;
//getting difference between the childs top and parents viewable area
var yDiff = ($("#childDiv").position().top + $("#childDiv").outerHeight()) - $("#parentDiv").innerHeight()

そして

//if upArrow and childPosition is above viewable area (that's why it goes negative)
if(event.keyCode == 38 && childPos < 0)
    $("#parentDiv").scrollTop += childPos;//add the negative number to the scrollTop
//if downArrow and the difference between childs top and parents viewable area is greater than the height of a childDiv
else if(event.keyCode == 40 && yDiff > $("#childDiv").outerHeight()-1)
    $("#parentDiv").scrollTop += yDiff;//add the difference to the parents scrollTop

Answer 2

あなたはjQueryのを使用している場合は、

、あなたはposition()を使用して親を配置のITへの要素の位置を取得することができます。スクロールDIVは、それが配置するために相対的/絶対位置に設定することができる。

また、あなたはスクロール位置を変更するために scrollTopスプライトのプロパティを変更することができます。またはjqueryのscrollTop(pos)ます。

Answer 3

あなたは、内側のdiv scrollTopスプライトを取得する必要があり、それに外側のdivの高さを追加し、それが

あなたが閲覧可能な寸法を与えます