什么'这是跟踪用户向下滚动页面的最实用的方法

What's the most pragmatic way to keep track of how far down the page a user has scrolled?

本文关键字：滚动 方法 用户 跟踪 什么      更新时间：2023-09-26

我现在正在建立一个网站，在那里可以在滚动中触发一堆动画和图形事件（你知道其中的一些很有趣）。我正试着决定如何测量滚动到页面下方的距离。

选项一，以像素为单位测量并触发事件：

$(document).scroll(function(){
  var scrolllength  = $(window).scrollTop()
switch(key) {
  case 84:
    foo();
    break;
  case 185:
    bar();
    break;
  default:
    return;
}

优点：可能更快

缺点：如果任何东西的高度发生变化，我必须手动测量和更新。这是一个静态的静坐，但我确实希望有很多调整和修补。

选项二，跟踪DOM元素。

$(document).scroll(function(){
  //this will be a bunch of differnt ones but for example
  if(isScrolledIntoView('#div'){
    $('body').css('background','black');
  }
}
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

优点：动态的、与内容无关的

缺点：由于每次触发滚动都会触发，我担心这种方法会使滚动变得不平滑。我至少要检查20件这种性质的东西。页面将被划分为不同的部分，也许我可以先检查哪个部分是可见的，然后再检查该特定部分中的项目。

我当然对更多的选择持开放态度！

一个选项是在脚本开始时存储所需div的偏移量：

var triggerone = $("#whateverdiv").offset().top;
var triggertwo = $("#whateverotherdiv").offset().top;
$(document).scroll(function(){
    var scrolllength = $(window).scrollTop()
    switch(scrolllength) {
        case triggerone:
            foo();
            break;
        case triggertwo:
            bar();
            break;
        default:
            return;
    }
}

这将第二种解决方案的易维护性与第一种解决方案（近似）的速度相结合。

答案不错。学习的东西。

我做了一个小小提琴链接

switch语句的问题在于它检查等式，并且用户通常保持滚动。无论如何，我无法通过开关使其工作，所以我使用了不等式。

相关文章：