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

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

Answer 2

很好的答案。学习东西。

我做了一个小小的小提琴link

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

什么是最务实的方式来跟踪用户滚动页面的距离？

2 个答案: