通過scrollTop，使子元素滾動至指定位置

想實現這樣的一個功能，點擊子元素，讓元素滾動至指定位置，怎么實現呢？

在代碼實現之前，先了解下相關關鍵點。

1、scrollHeight 屬性

通過 scrollHeight 屬性可獲得子元素的滾動高度，因此，子元素的總滾動高度等於每個子元素的 scrollHeight 之和。

2、scrollTop 屬性

父元素的scrollTop的最大值，等於子元素的總滾動高度減去父元素的高度。

3、獲取當前元素的滾動高度

在此例中，子元素都是li標簽，於是，可通過獲取 index，再配合 scrollHeight 求得子元素的 scrollTop 值。

4、滾動至指定位置

通過設置父元素的scrollTop的值等於子元素求得的scrollTop，即可使子元素滾動至父元素頂端。在本例中，我想滾動至中間位置，即減去3個子元素 scrollHeight 即可。

效果圖

html代碼：

<ul class="xq-time-picker-hour">
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <!-- 省略的內容 -->
    <li>21</li>
    <li>22</li>
    <li>23</li>
</ul>

js代碼

$(`#${TimePickerID} .${Prefix}time-picker-body`).on("click", "li", function () {
    let scrollNum = 3;
    let index = $(this).index();
    let scrollHeight = this.scrollHeight;
    $(this).parent().animate({
        scrollTop: scrollHeight * index - scrollHeight * scrollNum
    }, 300);
});

大功告成

原文鏈接: https://www.jianshu.com/p/2a8136853eb8