Question

有没有办法设置一个html元素数组。说Section_1，Section_2和Section_3在所述数组中。当用户向下滚动页面时，仅在向下滚动时，是否可以检查用户是否按该数组中指定的部分滚动？有点像...

var readerLocation = 150;
var content = ['block_1', 'block_2', 'block_3'];

bottom = $(window).height() + $(window).scrollTop();
height = $(document).height();

// If user starts to scroll send an event
if (bottom > readerLocation) {
  console.log('started reading');
  var i = 0;
  for (block in content) {
    console.log(content[i]);
    //check if scrolled past element in array here()
    i++;
  }
}

Answer 1

您可以做的是设置$(window).scroll()事件。

对于数组中的每个元素，您希望在页面中找到它的偏移量，并将其与当前的$(window).scrollTop()进行比较。每当它通过offset().top Section_1时，你知道它在第1部分中并且尚未到达第2部分。

Answer 2

这是一个代码示例，它将带您接近您想要的位置：

要记住的一些事项：

通过在数组foreach循环中指定条件来运行代码。
确保跟踪变量，而不是动态应用代码。
由于您使用的是jQuery，请充分利用$(window).scroll来跟踪滚动事件。

$(document).ready(function(){
	var lastScrollTop = 0,
        block = ['block_2', 'block_5', 'block_7'];

	$(window).scroll(function(event){
    	var st = $(this).scrollTop(),
            block_2_offset = $('#' + block[0]).offset().top;
       	
        if (st > lastScrollTop){
            // downscroll
            block.forEach(function(block, i) {
                // check if we passed through on scroll down, then do something, modify the condition for a more specialized response
                if(st >= $('#' + content[i]).offset().top){
                    // do something
                }
            });
        }
        lastScrollTop = st;
   	});
});

div {
    padding-bottom: 500px;
    text-align: center;
}
div:nth-child(3) {
    background-color: blue;
}
div:nth-child(6) {
    background-color: yellow;
}
div:nth-child(8) {
    background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block_1">
    block 1
</div>
<div id="block_2">
    block 2
</div>
<div id="block_3">
    block 3
</div>
<div id="block_4">
    block 4
</div>
<div id="block_5">
    block 5
</div>
<div id="block_6">
    block 6
</div>
<div id="block_7">
    block 7
</div>
<div id="block_8">
    block 8
</div>
<div id="block_9">
    block 9
</div>

跟踪用户滚动数组中的div

2 个答案: