javascript - divがオーバーフローによって非表示になっている場合はスクロールします

Question

クラス'.selected'のdivがコンテナdivの下部にあることを検出しようとしています（overflow：hiddenによって非表示になっています）。そうである場合は、コンテナの内容を下にスクロールして、コンテナの高さに相当するものをスクロールするか、「。selected」が再びコンテナの上部に来るまでスクロールして、次の「ページ」を表示します。

これを行うための最良の方法は何でしょうか？

Answer 1

scrollTo私はこれを作るためにコメントに投稿したリンクからの数学のいくつかを使用しました：

var top = it.position().top; 
var bd = top + it.height();     
var ch = $('.tab-demo-content').height();     
if(bd>ch){  //if focused item isn't visible, scroll to it
    $(it).closest('.tv-container-vertical').scrollTo(it,500);   //this finds its parent container and scrolls it
}

• bd=コンテナの上部から選択したアイテムの下部までの距離
• ch=コンテンツコンテナの高さ

Answer 2

適切なネイティブ（非jquery）javascriptコードは次のとおりです。

element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean arguments
element.scrollIntoView(scrollIntoViewOptions); // Object argument

（https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewを参照してください）

最新のブラウザのほとんどは、scrollIntoViewIfNeeded（）もサポートしています。

element.scrollIntoViewIfNeeded()