Question

我正在尝试在水平网页中滚动时获取元素位置。我尝试使用

主滚动：

$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta*60);
});

然后：

  $(window).scroll(function() {
    alert('Anything');
  });

但这根本不起作用。我尝试使用mousewheel插件

$('.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

offset
position

您可以使用这些

下面是同时具有垂直和水平滚动条的示例

$(document).ready(function(){
	document.addEventListener('scroll', function (event) {
          console.log(event.target);
          console.log($("#p3").position());
          console.log($("#p3").offset());
          console.log($("#p3").position().top - $("body").scrollTop());
          console.log($("#p3").position().left - $("body").scrollLeft());
	}, true);
  });

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

重要：位置和偏移量是相对于父标记的位置和偏移量

如何将window.scroll与水平滚动一起使用以获取元素位置

1 个答案: