滚动事件停止后的事件？
[英]Event AFTER scroll event stops?
问题描述
所以我有一个想要添加到栏中的阴影，如以下示例所示：
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"
}
我要实现的效果是，当用户滚动时，我希望显示框阴影，但是当他们停止滚动时，我希望框阴影消失。 我怎样才能达到这种效果？
3 个解决方案
解决方案1
1 2018-01-14 00:20:20
没有“ scrollstop”事件。 您需要确定用户何时停止滚动自己。
当用户滚动时，请启动一个计时器几十毫秒（您必须使用此值），然后清除所有现有的计时器。 当计时器达到0时，调用您的函数。
解决方案2
1 已采纳 2018-01-14 00:49:47
您可以使用计时器来检查是否在最近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>
解决方案3
0 2018-01-14 00:32:42
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>
滚动后touchstart事件停止工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.