Javascript 什么'；跟踪用户在页面下方滚动的最实用的方法是什么？

我现在正在建立一个网站，在那里一堆动画和图形事件会在scroll上被触发（你知道那些奇特的）。我正试图决定如何测量卷轴在页面下方的距离

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

$(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));
}

$（文档）。滚动（函数（）{
//这将是一系列不同的，但例如
if（isScrolledIntoView（“#div”）{
$（'body'）.css（'background'，'black'）；
}
}
函数IsCrolledinToView（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=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

语句的问题是，它检查等式，用户通常会不断滚动。无论如何，我无法让它与一个开关一起工作，所以我使用了不等式。

您可以在脚本开始时只存储一次所需div的

偏移量，如下所示：
var triggerone=$（“#whateverdiv”）.offset（）.top
这真是个好主意！如果你写了答案，我会投赞成票。^^不管你做什么，用我这辈子都没试过的方法来限制你对滚动事件的响应次数可能是个好主意，但这是我的2美分…在每次之后加上一些隐藏的除法（Letsay）400px和该divson的焦点，我们可以确定已完成的滚动量。还请解释为什么这有帮助/有效。您的代码解决了问题的哪一部分（因为问题相对开放）。具体来说，它试图缓解我猜的性能问题，并扩展了问题的第二个解决方案。@Kissaki，我想我的观点是，我会在答案中添加一个原因。谢谢：）这不是一个很难回答的答案…请将推荐作为评论（如果可以的话）