如何滚动到ul列表中的li元素

kyl*_*leb 11 javascript jquery list web

我在带有li元素的div中有一个ul列表,而li元素里面是一个复选框.我有复选框的ID.所以我想获得复选框的父li元素并滚动到它的位置.我无法使其发挥作用.

我的HTML是这样的:

<div id="divElement">
   <ul>
      <li>
         <input type="checkbox" id="343532532523" />
      </li>
   </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

我尝试了这两种方法,它们对我不起作用:

$('#divElement').scrollTop($('#343532532523').parent().position().top);
$('#divElement').firstChild().scrollTop($('#343532532523).parent().position().top);
Run Code Online (Sandbox Code Playgroud)

Dar*_*ren 8

如果有人需要一个vanilla JS版本,以下对我来说效果很好,50的值就是这样当我接近列表顶部时我就会显示整个项目.你可以调整它.

function updateListSelection(liID) {

    var list = document.getElementById("id Tag Of The <UL> element"),
        targetLi = document.getElementById(liID); // id tag of the <li> element

    list.scrollTop = (targetLi.offsetTop - 50);
};
Run Code Online (Sandbox Code Playgroud)


Dav*_*lds 6

我使用 Element.scrollIntoView() 方法修复了此问题:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

它可以在 Chrome、Firefox 和 Internet Explorer 中运行 - 我还没有在任何其他浏览器中测试过它。


kyl*_*leb 4

我的另一个开发朋友帮助了我,我们想出了这个,它有效,没有动画,我可以做到,我只是不需要它。

var offset = $('#someDivElementId ul li').first().position().top;
$('#someDivElementId').scrollTop($('#23532532532532').parent().position().top - offset);
Run Code Online (Sandbox Code Playgroud)