JSやjQueryの - スクロール可能なdiv要素の表示可能領域を取得
-
20-09-2019 - |
質問
私は現在、動的に移入され、スクロール可能なdiv要素を持っている。
私は一度に選択された一人の子供を持っている上矢印と下矢印キー入力をキャプチャし、親のdiv内のクラスを変更する機能を持っています
(基本的に、これは選択入力を模倣する)
ここで私が何をしたいです。 私は最近、「選択」の子供を表示する(ダウンしたりアップ)を変更するのdivの表示可能領域が必要ですが、その子は親の表示可能領域内に存在しない場合にのみます。
私は何とか親のdivのscrollHeightとの関係で表示可能領域を取得する必要があります...しかし、私はこれを行う方法を確認していないので...
また、私は親のdivの表示可能領域を設定する方法がわからないです。
すべてのヘルプをいただければ幸いです!
解決
いやはや、
それを考え出しましたまず、私は
を経由して、表示可能領域を取得します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
他のヒント
あなたはjQueryのを使用している場合は、
、あなたはposition()
を使用して親を配置のITへの要素の位置を取得することができます。スクロールDIVは、それが配置するために相対的/絶対位置に設定することができる。
また、あなたはスクロール位置を変更するために scrollTopスプライトのプロパティを変更することができます。またはjqueryのscrollTop(pos)
ます。
あなたは、内側のdiv scrollTopスプライトを取得する必要があり、それに外側のdivの高さを追加し、それが
あなたが閲覧可能な寸法を与えます所属していません StackOverflow