获取可滚动父节点的顶部与嵌套子节点之一之间的距离

Question

我可以垂直滚动<li>，其中包含多个<ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> </ul> 。

HTML：

ul {
    max-height: 50px;
}
li {
    display: block;
    height: 10px;
}

CSS：

<ui>

然后使用JS，我得到<li>和let ul = document.querySelector('ul') let li = document.querySelector('li:nth-child(3)') 个节点之一：

getDistance(ul, li)

我想创建获取ul和li节点的函数（类似于{{1}}），返回ul和li的顶部之间的距离（以像素为单位）。 问题是如何实现这一功能。

Answer 1

x = /*your ul element*/
y = /*your li element*/
distX = y.offsetLeft - x.offsetLeft;
distY = y.offsetTop - x.offsetTop;
distance = Math.sqrt(distX*distX + distY*distY);
alert(Math.floor(distance));

但如果你把东西放进去，你必须减去第一个x的高度和宽度。此方法在不同浏览器中的元素支持和边框宽度方面存在一些问题。