javascript - 跟踪用户向下滚动页面的距离的最实用方法是什么？

Question

我现在正在构建一个网站，其中有一堆动画和图形事件在滚动时触发(你知道花哨的)。我正在尝试决定如何测量滚动到页面下方的距离。

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

$(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 件这种性质的东西。该页面将分为不同的部分 o 也许我可以先检查哪个部分可见，然后再检查该特定部分中的项目。

我当然愿意接受更多选择!

Answer 1

一个选项是在脚本开始时存储您需要的任何 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;
    }
}

这结合了第二种解决方案的易维护性和第一种解决方案的(近似)速度。