时间戳

首页 > 解决方案 > 获取可滚动父节点顶部和嵌套子节点之一之间的距离

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

问题描述

我有<ul>几个垂直滚动<li>。

HTML：

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
</ul>

CSS：

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

然后用 JS 我得到<ui>一个<li>节点：

let ul = document.querySelector('ul')
let li = document.querySelector('li:nth-child(3)')

我想制作一个函数来获取 ul 和 li 节点（类似于getDistance(ul, li)），它返回 ul 和 li 顶部之间的距离（以像素为单位）。问题是如何实现该功能。

标签： javascript

解决方案

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));

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

推荐阅读