滚动事件停止后的事件？答案

【问题标题】：Event AFTER scroll event stops?滚动事件停止后的事件？
【发布时间】：2018-01-14 00:13:07
【问题描述】：

所以我有一个盒子阴影，我想将它添加到条形图上，如本例所示：

https://jsfiddle.net/eddietal2/qgLvsx2v/

这是我拥有的 javascript：

var topBar = document.getElementById('top-bar');
var wrapper = document.getElementById('wrapper');

wrapper.onscroll = function () {
  topBar.style.boxShadow = "10px 20px 30px blue"
}

我想要的效果是，当用户滚动时，我希望盒子阴影出现，但是当他们停止滚动时，我希望盒子阴影消失。怎样才能达到这个效果？

【问题讨论】：

How do I know when I've stopped scrolling Javascript的可能重复
你想“去抖动”你的滚动功能。

标签： javascript html css

【解决方案1】：

您可以使用计时器来检查您是否在最后 N 毫秒内滚动并在此之后调用回调。

var wrapper = document.getElementById('wrapper')

function onScroll(element, scrolling, stopped) {
  let timer = null
  // bind the event to the provided element
  element.addEventListener('scroll', function (e) {
    // use a class to switch the box-shadow on
    element.classList.add('scrolling')
    if (typeof scrolling === 'function') {
      scrolling.apply(this, arguments)
    }
    // clear the existing timer
    clearTimeout(timer)
    // set a timer for 100 ms
    timer = setTimeout(() => {
      // if we get in here the page has not been scrolled for 100ms
      // remove the scrolling class
      element.classList.remove('scrolling')
      if (typeof scrolling === 'function') {
        stopped.apply(this, arguments)
      }
    }, 100)
  })
}

// call the function
onScroll(wrapper, 
  function scrolling(e) {
    e.target.classList.add('scrolling')
  },
  function stopped(e) {
    e.target.classList.remove('scrolling')
  }
)

* {
  box-sizing: border-box;
}

#wrapper {
  height: 200px;
  padding: 2em;
  overflow: auto;
  transition: .4s box-shadow;
}

#wrapper.scrolling {
   box-shadow: 0px 0px 60px blue inset;
}

#topBar > div {
  background: #eee;
  height: 200px;
  width: 200px;
  margin-bottom: 1em;
  position: relative;
  transition: .4s all;
}

#wrapper.scrolling #topBar > div {
  transform: perspective(1200px) translateZ(20px);
  box-shadow: 2px 2px 10px #777;
}

<div id="wrapper" class="">
  <div class="" id="topBar">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
</div>

【讨论】：

非常非常感谢！解决了我的问题，我也学到了一些新东西！
这就是 stackoverflow 的用途。 ;-)

【解决方案2】：

没有'scrollstop'事件。您需要自己识别用户何时停止滚动。

当用户滚动时，启动一个几十毫秒的计时器（您必须使用这个值），然后清除所有现有的计时器。当计时器达到 0 时，调用您的函数。

【讨论】：

【解决方案3】：

Onscroll 很容易监控以应用阴影，但移除阴影是棘手的部分，我能想到的最好的就是事件 mouseout...

<!DOCTYPE html>
<html>
<head>
<style>

div {
 border: 1px solid black;
 width: 200px;
 height: 100px;
 overflow: scroll;
}

</style>
</head>
<body>

<div onmouseout="this.style.boxShadow='none';" onscroll="this.style.boxShadow='10px 20px 30px blue';">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>

</body>
</html>

【讨论】：