[英]How can I create a hide on scroll down and show on scroll up menu whitout jquery or other dependencies
[英]How can I create a custom event for scroll up and down?
MDN告诉我如何创建自定义事件(我做得不好)
var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
而且我也知道如何检测鼠标滚动...
var doScroll = function (e) {
// cross-browser wheel delta
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Do something with `delta`
document.body.innerHTML = delta;
e.preventDefault();
};
if (window.addEventListener) {
window.addEventListener("mousewheel", doScroll, false);
window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
window.attachEvent("onmousewheel", doScroll);
}
但我不知道如何将两者相互混合并创建自定义事件,因此我可能会遇到以下情况:
window.addEventListener('scrollUp', sUpFunction);
window.addEventListener('scrollDown', sDownFunction);
感谢大伙们。
首先,我将使用“ wheel”事件而不是非标准化的“ mousewheel”事件 。
我创建了scrollUp和scrollDown自定义事件分配的简单实现。
编辑
为了支持IE,我为CustomEvent添加了IE polyfill
// For IE support (function () { if ( typeof window.CustomEvent === "function" ) return false; //If not IE function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; } CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })(); let element = document.getElementsByClassName("scroll-area")[0], scrollUpEvent = new CustomEvent("scrollUp"), scrollDownEvent = new CustomEvent("scrollDown"); function scrollDown(){ console.log("scrolled down"); } function scrollUP(){ console.log("scrolled up"); } function scrollHappened(e){ if(e.deltaY < 0){ element.dispatchEvent(scrollUpEvent); } else { element.dispatchEvent(scrollDownEvent); } } element.addEventListener("wheel", scrollHappened); element.addEventListener("scrollUp", scrollUP); element.addEventListener("scrollDown", scrollDown);
.scroll-area { border: solid 2px black; height: 30px; }
<div class="scroll-area">Scroll on me</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.