jquery 滚动到指定位置

需求是这样的: 有一个select下拉框,当点击下拉框时,定位滚动到到被选中的这一行.

<select class="select-lists">
    <option id="1">第一</option>
    <option id="2">第二</option>
    <option id="3">第三</option>
    <option id="4">第四</option>
    <option id="5">第五</option>
    <option id="6">第六</option>
    <option id="7">第七</option>
    <option id="8">第八</option>
</select>

如果目前被选中的是第五,那么点击select,下拉框的内容自动定位到当前行.

起初我的实现是这样的

// id指被选中的option的id
$(".select-lists").scrollTop($(`#${id}`).offset().top - $(".group-items").offset().top)

初次点击效果是正确的,但再次点击就会出现位置异常

后分析原因得知,当元素.select-lists产生滚动时,$(`${id}`).offset().top计算值就会减少,那么下次滚动就会减少,此时就需要再加上元素.select-lists已滚动的距离

最终实现如下:

$(".select-lists").scrollTop($(`#${id}`).offset().top - $(".select-lists").offset().top + $(".select-lists").scrollTop());

// 动画实现如下
$(".select-lists").animate({
        scrollTop: $(`${id}`).offset().top - $(".select-lists").offset().top + $(".select-lists").scrollTop()
}, 500);