限制滚动事件以添加框阴影

Question

当我在页面上滚动元素时，我会向另一个指定元素添加阴影，以便在视觉上向用户显示页面滚动，通常是在查看长列表时。

# HTML
<header id="header">
  header...
</div>
<main data-behavior="scroll-shadow" data-scroll-shadow-element="#header">
  ...
</main>

# CoffeeScript using jQuery
$("[data-behavior~='scroll-shadow']").on "scroll", (e) ->
  $trigger = $(this)
  $target = $($trigger.attr("data-scroll-shadow-element"))

  if $trigger.scrollTop()
    $target.addClass("scroll-shadow-active")
  else
    $target.removeClass("scroll-shadow-active")

这段代码很好用，它添加/删除了显示box-shadow的CSS类。

但是，我知道由于性能原因，将事件附加到滚动是一个坏主意。

正如我在研究这个问题时，我遇到了一些不同的解决方案，我不确定哪种解决方案最适合这种用例。

Debouce

似乎可能，因为它会抓取一组滚动事件并为这些组触发一次处理程序，因此它不会每次都触发。但是，似乎此解决方案实际上不会添加样式阴影，直到用户停止滚动。因此，如果用户从一个很长的列表的顶部滚动到底部，他们将在几秒钟之后才会看到阴影。

节气门

这似乎是更好的方法，基本上只执行一定数量的事件而不是每一个事件（可能只有1/4的滚动事件实际上触发了处理程序）。

由于我不是任何形式的JavaScript性能专家，我不确定什么是更好的选择。我也在考虑使用Lodash作为JS实用程序库，因为他们已经测试了用于限制/等的代码。

对于这种特定类型的事件处理，是否会限制性能最佳的解决方案？有什么方法可以以高效的方式为滚动元素添加阴影？

Answer 1

我如何理解“去除事件”是对这些事件有选择性......而不是全部采用它们。

在滚动时，我通常会接受第一个事件并忽略其他事件 从表现的角度来看......因为，这里只有addClass()。但它可能是反复调用会不好的其他东西。

所以我使用“旗帜”或类似的计数器。

然后，setTimeout()在用户完成滚动时重置该标志或计时器。

var shadowTarget;
var scrollTimeout;
var eventCount=0;
$("[data-behavior~='scroll-shadow']").on("scroll", function(){

  eventCount++;
  if(eventCount==1){
    trigger = $(this);
    shadowTarget = $(trigger.attr("data-scroll-shadow-element"));

    console.log("Adding the class.");
    shadowTarget.addClass("scroll-shadow-active");
  }

  // setting a new timeout at each scroll event.
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(function(){
    console.log("Removing the class.");
    shadowTarget.removeClass("scroll-shadow-active");
    eventCount=0;
  },500);


});

header{
  background-color: cyan;
}
main{
  overflow-Y: scroll;
  height:600px;
}
.scroll-shadow-active{
  border: 1px solid red;
  box-shadow: 4px 4px 3px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<header id="header">
  header...
</header>
<main data-behavior="scroll-shadow" data-scroll-shadow-element="#header">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin leo eu bibendum aliquam. Curabitur aliquet eros lectus, et molestie nisi tempor vel. Quisque mollis, sapien hendrerit accumsan pellentesque, quam quam vestibulum orci, nec ornare diam turpis ut purus. Cras ut quam ut nibh sollicitudin scelerisque. Nunc volutpat mauris sed porta lacinia. Vivamus pharetra eget tortor nec venenatis. Vivamus nec velit ut felis consectetur ullamcorper. Suspendisse id dictum enim. Nulla ut volutpat nisi, vitae tempor diam. Proin mattis dui ante, fermentum lacinia ex vulputate at. Donec tristique eget urna vel convallis. Mauris ac elit ut orci pretium faucibus ac sit amet justo.
  </p>
  <p>
    Suspendisse gravida sodales lorem, sit amet posuere nunc semper et. Proin euismod at arcu in suscipit. Quisque eu efficitur nunc, quis hendrerit orci. Mauris a erat quis ante aliquam imperdiet posuere ac dui. Nam sit amet consectetur nunc. Donec risus ex, convallis eget orci tristique, rhoncus auctor tortor. Aliquam sit amet fermentum nisl. Morbi vel ipsum et nisl tristique fringilla nec sed ipsum. Aenean aliquet purus id bibendum tempus. Suspendisse auctor pretium augue, a tincidunt sapien vehicula quis. Ut eu sagittis turpis. Nulla rhoncus felis nibh, in viverra magna sagittis congue. Integer tempus ultricies viverra. Sed a aliquet velit.
  </p>
  <p>
    Cras sagittis, dolor accumsan commodo condimentum, tellus lorem bibendum diam, in consequat augue quam nec est. Quisque id eros tortor. Ut ex risus, vehicula quis cursus a, efficitur convallis erat. Maecenas egestas lobortis maximus. Phasellus varius, ipsum in maximus ultrices, orci lectus tincidunt magna, vel vestibulum urna turpis ac leo. Nulla nulla massa, consequat non vulputate imperdiet, volutpat dapibus orci. Etiam consequat volutpat est, id tempus turpis venenatis vitae. Praesent arcu erat, porta molestie neque non, ultrices dignissim sem. Suspendisse potenti. Duis nec mauris commodo libero maximus egestas. Sed laoreet maximus tellus semper accumsan.
  </p>
  <p>
    In hendrerit molestie blandit. In hac habitasse platea dictumst. Nullam in ipsum urna. Maecenas in ante nisi. Integer porta molestie enim, sit amet scelerisque mauris fringilla elementum. Phasellus at elit mattis, scelerisque ligula et, imperdiet leo. Suspendisse nec dignissim augue. Cras neque turpis, tempus vel tortor sit amet, commodo laoreet augue. Aliquam ac dui vel lorem facilisis tristique non non urna. Cras pharetra mauris id aliquet luctus. Morbi sit amet felis a lectus maximus lacinia. Sed quam elit, imperdiet eu rhoncus in, scelerisque sed arcu. Aliquam feugiat ultrices finibus. Suspendisse a semper risus, gravida laoreet lacus. In fermentum auctor volutpat. Nullam egestas, lorem eget imperdiet semper, elit nisl aliquet neque, nec mollis erat lacus ut nibh.
  </p>
  <p>
    Ut sit amet ex iaculis, vestibulum urna id, dictum elit. Nunc semper semper lacus at feugiat. Nam viverra orci vel risus vulputate, sed fringilla turpis ultrices. Vivamus pulvinar, mi in bibendum scelerisque, nunc augue laoreet sem, vitae posuere ipsum mauris vel turpis. Aliquam quis nulla maximus ligula eleifend aliquet ut a neque. Cras lobortis id ante quis sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus quam at rhoncus venenatis. Sed tempus nec urna vel tempus. Mauris aliquam, risus id mollis commodo, dolor tortor porta augue, in consequat purus velit nec ante.
  </p>
  <p>
    Proin tempus pharetra nisl ut rhoncus. Fusce dapibus tincidunt lobortis. Donec dolor nisi, posuere ut ullamcorper a, molestie ut enim. Sed quis felis accumsan, pellentesque nunc at, vestibulum dolor. Pellentesque quis ex nec ex tincidunt sodales. Pellentesque eget justo nisl. Nullam rutrum ligula sed libero tempor ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam enim felis, cursus sed sem a, gravida consectetur diam. Ut accumsan diam ut tempor fringilla. Etiam at ex lacus. Morbi tortor mauris, blandit sed mi ut, eleifend tempus magna.
  </p>
  <p>
    Maecenas at rutrum ante. Aenean eu sapien in sem hendrerit facilisis dictum vel sem. Ut laoreet ligula quis risus congue commodo. Donec tempor, turpis sollicitudin vulputate auctor, nunc mi maximus lectus, ornare lobortis metus neque a nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id tempor purus. Donec ipsum mauris, molestie at posuere non, scelerisque ac massa. Etiam scelerisque tempus ante, finibus dictum ante gravida eget. Suspendisse convallis risus vel velit ornare, vitae aliquam purus dictum. Nullam suscipit magna tellus, a accumsan elit viverra in. Etiam rutrum turpis non lorem condimentum viverra.
  </p>
  <p>
    Maecenas cursus eros sed urna laoreet pulvinar. Sed a consectetur felis, consectetur gravida enim. Etiam varius ac ligula vel ultrices. Proin et lectus euismod, molestie purus ut, hendrerit mi. Suspendisse lobortis ipsum sem. Quisque nec augue quis lectus egestas consequat. Donec in arcu in mi feugiat congue. Nam porta augue venenatis diam auctor, quis aliquam dolor pulvinar. Sed vitae nibh nec ligula congue facilisis ac eget felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tellus arcu, commodo a vestibulum et, pulvinar vel lacus.
  </p>
  <p>
    Quisque vel elit vitae turpis sollicitudin fringilla. Quisque iaculis dignissim sodales. Vivamus in nisi id turpis commodo pretium ornare ac enim. Nulla eu ex lobortis, lacinia mauris sed, consectetur diam. Donec at metus vel metus tincidunt blandit. Donec molestie purus quis sapien rhoncus euismod. Donec gravida, nunc quis consequat ornare, augue leo vestibulum eros, ac euismod lectus ex non mi.
  </p>
  <p>
    Vestibulum quis libero sed risus consectetur porttitor sed quis nunc. Duis malesuada erat posuere erat suscipit, nec commodo augue faucibus. Nulla euismod diam eget sollicitudin fermentum. Sed ullamcorper tempus augue et tempus. Mauris non neque justo. Aenean tristique mauris nibh, sit amet lobortis est tristique ut. Aliquam nibh ex, varius vel consequat nec, vehicula non turpis.
  </p>
</main>

正如你所看到的......只有一个“添加课程”。在控制台中。
;）