使用overflow-x：auto

Question

我有一个带overflow-x：auto的元素，我希望能够在这个元素里面单击并确定元素左边缘的左偏移量（以px为单位）。问题是这个元素包含其中的一些其他元素，所以我不能只使用MouseEvent上的原始offsetX属性，就好像我不小心点击其中一个嵌套的div，它会给我偏移左边的那个内部div的填充边缘，而不是我想成为目标的元素。

此外，我不能只使用MouseEvent.clientX - element.offsetLeft，就好像我完全滚动到元素中一样，它不会返回占用现在隐藏的滚动值的值 - 过去的一部分。

我怎么能： 1 - 确定鼠标事件的X pos与元素的左边缘之间的距离？

OR

2 - 创建一个变通方法，以某种方式指定mouseEvent的目标（这是一个只读属性，所以我不确定这是否可能）？

我正在使用Typescript和Angular4，我不想使用jQuery，所以请不要建议基于jQuery的解决方案。谢谢！

感谢。

Answer 1

修改 这也可以通过在容器元素

上使用HTML DOM属性scrollLeft来完成

找出解决方案。

当offsetX属性与我们的容器元素相关时，我们可以确保只通过添加条件来执行鼠标移动逻辑：

if (mouseMoveEvent.clientX - myElement.offsetLeft) <= mouseMoveEvent.offsetX) {
    // Handle mousemove
}
else {
    // Do nothing
}

对于这个overflow-x：auto元素，mouseMoveEvent.offsetX应该只大于或等于（mouseMoveEvent.clientX - this.element.offsetLeft）。

因此，如果不是，那意味着我们的mouseMoveEvent.offsetX属性以内部元素为目标，在这种情况下我们可以跳过逻辑。