Question

所以我有一个盒子阴影，我想添加到一个栏，如下例所示：

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

我想要的效果是，当用户滚动时，我想要显示方框阴影，但是当它们停止滚动时，我希望方框阴影消失。我怎样才能达到这个效果？

Answer 1

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

当用户滚动时，启动一个计时器几十毫秒（你必须使用这个值），并清除任何现有的计时器。当计时器达到0时，请调用您的功能。

Answer 2

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

* {
  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>

JSONLoader jsonLoader = new JSONLoader(jsonFile);

Answer 3

Onscroll易于监控以应用阴影，但删除阴影是棘手的部分，我能想到的最好的事件是鼠标输出...

<!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>

事件后滚动事件停止？

3 个答案: