JavaScriptを - スクロールだから、長いスクロール可能なリストを持っているし、ビューに特定のDOM要素をスクロールしたいビュー

Question

にリスト要素をオーバーフローし：

を私はあなたたちと共有したいと思った解決策が出ているしています私はそれがいくつかに役立つことを願っています！ （このQAのアイデアがSOから直接取得されます） 私はSO上で見てきたいくつかの小さなJSのトリックを取り、ダウン下記の機能を作ってみた：

Answer 1

/** 
* scroll an overflowed list so that the elementToView is visible 
* 
* @param  {<NodeList item>} elementToView  list element to make visible 
* @param  {<NodeList item>} elementContainer element containing the elementToView 
* @param  {<NodeList item>} listElement  actual list (<ul>?) element to scroll (could be the same as container) 
* 
* 
*/ 
function scrollList(elementToView, elementContainer, listElement) { 
    let containerHeight, topPos, listItem, temp = null 
    if (typeof window !== 'undefined' && elementToView && elementContainer && listElement) { 
     temp = window.getComputedStyle(elementContainer, null).getPropertyValue('padding-top') 
     temp = parseInt(temp, 10) + parseInt(window.getComputedStyle(elementContainer, null).getPropertyValue('padding-bottom'), 10) 
     // temp holds the top and bottom padding 
     // usable space is the offsetHeight - padding 
     containerHeight = elementContainer.offsetHeight - temp 
     // amount of pixels away from the top of the container 
     topPos = elementToView.offsetTop 
     if (!containerHeight || !topPos) return false 
     // get the height of a list item in the list to scroll 
     listItem = listElement.querySelector('li:first-of-type').offsetHeight 
     // actually do the scrolling now 
     // scroll the top of the list to show the elementToView on the bottom (as the last visible element in the list) 
     listElement.scrollTop = (topPos - (containerHeight - listItem)) 
    } 
} 

をここでは機能の使用例は次のとおりです。これはフォーカスクラスにDOM要素（LIアイテム）を取得し、章リストの最後の目に見える位置にスクロールしようとしている（右の下より上の位置を意味

let focusElement = document.getElementsByClassName('focus')[0] 
let containerElement = document.getElementsByClassName('modal')[0] 
let listElement = document.getElementsByClassName('chapter-list')[0] 
// let's check if any selection index has changed, and then scroll to the correct 
// positions to make sure the selected elements are in view 
if (chapterlistSelectionIndex !== prevState.chapterlistSelectionIndex) { 
    scrollList(focusElement, containerElement, listElement) 
} 

モーダルコンテナ）ここで

は、私が指摘したいいくつかのことです。）getPropertyValueとともに（

• getComputedStyleを取り除くことによって、私たちは実際の使用可能なスペースがスクロールするための容器の中にあるどのくらい把握することができますparseIntに2つ目のparam offsetHeight
• で計算パディングで重要であり、私はちょうど発見し、ここではそれが（それは解析できない場合またはNaN）結果はベース10であることを確認します何か
• querySelectorグラブこの場合、個々のリストアイテムの視覚的な高さを測定して、最後に表示されるリストアイテムとして完全に一致するようにします。
• 最後に、私たちはelementToViewをコンテナの距離からリストの一番上のリストアイテムまでスクロールします（リストアイテムをスクロールしてコンテナの下部に貼り付けるようにします）。あなたはまた、または多分途中
• で、リストの一番上のアイテムをしたい場合、あなたははキーワードを聞かせについてはわからないだけの場合には、調整見ることができる場所ですthis

私はこれが助けてくれることを願っています！