想實(shí)現(xiàn)這樣的一個功能弄捕，點(diǎn)擊子元素，讓元素滾動至指定位置导帝，怎么實(shí)現(xiàn)呢守谓？
在代碼實(shí)現(xiàn)之前，先了解下相關(guān)關(guān)鍵點(diǎn)您单。
1斋荞、scrollHeight 屬性
通過 scrollHeight 屬性可獲得子元素的滾動高度，因此虐秦，子元素的總滾動高度等于每個子元素的 scrollHeight 之和平酿。
2、scrollTop 屬性
父元素的scrollTop的最大值悦陋，等于子元素的總滾動高度減去父元素的高度蜈彼。
3、獲取當(dāng)前元素的滾動高度
在此例中俺驶，子元素都是li標(biāo)簽幸逆，于是，可通過獲取 index暮现，再配合 scrollHeight 求得子元素的 scrollTop 值还绘。
4、滾動至指定位置
通過設(shè)置父元素的scrollTop的值等于子元素求得的scrollTop栖袋，即可使子元素滾動至父元素頂端拍顷。在本例中，我想滾動至中間位置塘幅，即減去3個子元素 scrollHeight 即可昔案。
效果圖
效果圖
html代碼：
<ul class="xq-time-picker-hour">
<li>01</li>
<li>02</li>
<li>03</li>
<!-- 省略的內(nèi)容 -->
<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);
});
大功告成
