[解決済み] オーバーフローしたDiv内の要素にスクロールするにはどうすればよいですか？

質問

一度に5つしか表示できないdivの中に、20のリスト項目があります。項目番号10までスクロールし、次に項目番号20までスクロールする良い方法は何でしょうか？すべてのアイテムの高さはわかっています。

その scrollTo プラグインがこれを行うのですが、そのソースは深く考えないと超簡単には理解できないものです。 このプラグインは使いたくない。

例えば、2つの要素を受け取る関数があるとします。 $parentDiv , $innerListItem どちらも $innerListItem.offset().top また $innerListItem.positon().top は、$parentDivの正しいscrollTopを与えてくれます。

解決方法は？

その $innerListItem.position().top は実際には相対的なものです。 .scrollTop() は、その最初の位置づけられた祖先の そのため、正しい $parentDiv.scrollTop() の値を確認することから始めます。 $parentDiv が配置されています。もし、まだ明示的な position を使用します。 position: relative . 要素 $innerListItem までのすべての祖先と $parentDiv は、明示的な位置を持つ必要がありません。これで $innerListItem を使っています。

// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);

// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
    - $parentDiv.height()/2 + $innerListItem.height()/2);