如何使用带有水平滚动的 window.scroll 来获取元素位置

Question

我试图在水平网页中滚动时获取元素位置。我试着用

主滚动：

$('html, body, *').mousewheel(function(e, delta) {

this.scrollLeft -= (delta*60);

});

然后：

  $(window).scroll(function() {

    alert('Anything');

  });

但这根本行不通。我尝试使用鼠标滚轮插件

$('.internal.th').on('mousewheel',function(event) {

  console.log(event.deltaX, event.deltaY, event.deltaFactor);

});

-0 -1 100但无论我滚动多少，它都会一直显示相同的位置

我试过了

$('.internal.th').on('scroll', function() {

  var val = $(this).scrollLeft()

  if (val >= 100) alert('Hello')

})

但它根本没有做任何事情

这个想法是从与窗口相关的左侧获取一些项目位置以管理另一个元素旋转，所以我想在水平滚动而不是垂直滚动时继续跟踪主要项目的位置

Answer 1

jQuery 提供 API偏移位置你可以使用那些下面是一个带有垂直和水平滚动条的示例$(document).ready(function(){&nbsp; document.addEventListener('scroll', function (event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(event.target);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($("#p3").position());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($("#p3").offset());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($("#p3").position().top - $("body").scrollTop());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($("#p3").position().left - $("body").scrollLeft());&nbsp; }, true);&nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p style="width: 2500px;display:inline-block">dasdasd<div ></div></p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p id="p3">dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p><p>dasdasd</p>重要：位置和偏移量是相对于父标签的位置和偏移量