JavaScript - 将溢出的列表元素滚动到视图中

Question

所以你有一个很长的可滚动列表，并且想要将特定的 DOM 元素滚动到视图中：

我想出了一个解决方案，想与大家分享，希望对大家有所帮助！ （这个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))
    }
}

下面是函数的使用示例：

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)
}

这将使用 focus 类获取 DOM 元素（li 项）并将其滚动到 chapter-list 中的最后一个可见位置（表示位置modal 容器底部的正上方）

这里有几点我想指出：

• getComputedStyle（连同getPropertyValue）允许我们通过去除使用offsetHeight 计算的填充来计算容器中有多少实际可用空间用于滚动
• parseInt 的第二个参数很重要，这是我刚刚发现的——这里它确保结果以 10 为底（如果无法解析，则为 NaN）
• querySelector 抓取与 css 选择器匹配的第一个子元素——在这种情况下，我使用它来测量单个列表项的视觉高度，以确保 elementToView 与最后一个可见列表项完美匹配
• 最后，我们要将 elementToView 滚动到容器的距离减去列表顶部的列表项（以便滚动列表项看起来附加到容器的底部）。如果您希望该项目位于列表顶部或中间，您可以在此处进行调整
• 另外，如果您不确定 let 关键字，请参阅this

我希望这会有所帮助！