มีวิธีรับเหตุการณ์ล้อเมาส์ (ไม่พูดถึงscroll
เหตุการณ์) ใน jQuery หรือไม่?
$(el).on('input', ...
มีวิธีรับเหตุการณ์ล้อเมาส์ (ไม่พูดถึงscroll
เหตุการณ์) ใน jQuery หรือไม่?
$(el).on('input', ...
คำตอบ:
มีปลั๊กอินที่ตรวจจับล้อเลื่อนของเมาส์ขึ้น / ลงและความเร็วในพื้นที่
$(document).ready(function(){
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log('scrolling up !');
}
else{
console.log('scrolling down !');
}
});
});
DOMMouseScroll
เหตุการณ์ถูกนำมาใช้ใน FF, เพื่อให้คุณได้ฟังทั้ง.bind('DOMMouseScroll mousewheel') {
evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...
e.originalEvent.wheelDelta
ไม่ได้กำหนดไว้ใน FF23
ผูกพันกับทั้งคู่mousewheel
และDOMMouseScroll
ลงเอยด้วยการทำงานได้ดีสำหรับฉัน:
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
}
else {
// scroll down
}
});
วิธีนี้ใช้ได้ใน IE9 +, Chrome 33 และ Firefox 27
แก้ไข - มี.ค. 2559
ฉันตัดสินใจที่จะทบทวนปัญหานี้อีกครั้งเนื่องจากผ่านมาระยะหนึ่งแล้ว หน้า MDN สำหรับเหตุการณ์การเลื่อนมีวิธีที่ดีในการดึงตำแหน่งการเลื่อนที่ใช้ประโยชน์requestAnimationFrame
ซึ่งเป็นที่นิยมอย่างมากกับวิธีการตรวจจับก่อนหน้าของฉัน ฉันแก้ไขรหัสเพื่อให้เข้ากันได้ดีขึ้นนอกเหนือจากทิศทางและตำแหน่งการเลื่อน:
(function() {
var supportOffset = window.pageYOffset !== undefined,
lastKnownPos = 0,
ticking = false,
scrollDir,
currYPos;
function doSomething(scrollPos, scrollDir) {
// Your code goes here...
console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
}
window.addEventListener('wheel', function(e) {
currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
lastKnownPos = currYPos;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(lastKnownPos, scrollDir);
ticking = false;
});
}
ticking = true;
});
})();
รหัสนี้ใช้งานได้ในขณะนี้ Chrome v50, Firefox v44, Safari v9, and IE9+
อ้างอิง:
ณ ตอนนี้ในปี 2017 คุณสามารถเขียนได้
$(window).on('wheel', function(event){
// deltaY obviously records vertical scroll, deltaX and deltaZ exist too
if(event.originalEvent.deltaY < 0){
// wheeled up
}
else {
// wheeled down
}
});
ทำงานร่วมกับ Firefox 51, Chrome 56, IE9 + ในปัจจุบัน
คำตอบที่พูดถึงเหตุการณ์ "เมาส์วีล" กำลังอ้างอิงถึงเหตุการณ์ที่เลิกใช้งาน เหตุการณ์มาตรฐานเป็นเพียง "ล้อ" ดูhttps://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
สิ่งนี้ใช้ได้ผลสำหรับฉัน :)
//Firefox
$('#elem').bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('#elem').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});
นี่คือสารละลายวานิลลา สามารถใช้ใน jQuery หากเหตุการณ์ส่งผ่านไปยังฟังก์ชันevent.originalEvent
ซึ่ง jQuery ทำให้พร้อมใช้งานเป็นคุณสมบัติของเหตุการณ์ jQuery หรือถ้าอยู่ในcallback
ฟังก์ชั่นข้างใต้เราเพิ่มก่อนบรรทัดแรก: event = event.originalEvent;
.
รหัสนี้จะปรับความเร็ว / จำนวนล้อให้เป็นปกติและเป็นผลบวกสำหรับสิ่งที่จะเป็นการเลื่อนไปข้างหน้าในเมาส์ทั่วไปและเป็นค่าลบในการเคลื่อนที่ของล้อเมาส์ไปข้างหลัง
var wheel = document.getElementById('wheel');
function report(ammout) {
wheel.innerHTML = 'wheel ammout: ' + ammout;
}
function callback(event) {
var normalized;
if (event.wheelDelta) {
normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
} else {
var rawAmmount = event.deltaY ? event.deltaY : event.detail;
normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
}
report(normalized);
}
var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);
นอกจากนี้ยังมีปลั๊กอินสำหรับ jQuery ซึ่งมีรายละเอียดมากกว่าในโค้ดและน้ำตาลเพิ่มเติม: https://github.com/brandonaaron/jquery-mousewheel
สิ่งนี้ใช้ได้ใน IE, Firefox และ Chrome เวอร์ชันล่าสุด
$(document).ready(function(){
$('#whole').bind('DOMMouseScroll mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
alert("up");
}
else{
alert("down");
}
});
});
วันนี้ฉันติดปัญหานี้และพบว่ารหัสนี้ใช้งานได้ดีสำหรับฉัน
$('#content').on('mousewheel', function(event) {
//console.log(event.deltaX, event.deltaY, event.deltaFactor);
if(event.deltaY > 0) {
console.log('scroll up');
} else {
console.log('scroll down');
}
});
ใช้รหัสนี้
knob.bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
moveKnob('down');
} else {
moveKnob('up');
}
return false;
});
ชุดค่าผสมของฉันมีลักษณะเช่นนี้ มันจะจางหายไปและจางหายไปในแต่ละการเลื่อนลง / ขึ้น มิฉะนั้นคุณจะต้องเลื่อนขึ้นไปที่ส่วนหัวเพื่อให้ส่วนหัวจางลง
var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0) {
if (header.data('faded')) {
header.data('faded', 0).stop(true).fadeTo(800, 1);
}
}
else{
if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
}
});
สิ่งที่กล่าวมาไม่เหมาะสำหรับการสัมผัส / มือถือฉันคิดว่าอันนี้ทำได้ดีกว่าสำหรับมือถือทั้งหมด:
var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
} else {
//Scrolling Up
if (header.data('faded')) {
header.data('faded', 0).stop(true).fadeTo(800, 1);
}
}
iScrollPos = iCurScrollPos;
});
ปลั๊กอินที่ @DarinDimitrov โพสต์jquery-mousewheel
, เสียกับ jQuery 3+ ขอแนะนำให้ใช้jquery-wheel
ที่ทำงานร่วมกับ jQuery 3+
หากคุณไม่ต้องการไปเส้นทาง jQuery MDN ขอเตือนอย่างสูงในการใช้mousewheel
เหตุการณ์นี้เนื่องจากไม่เป็นมาตรฐานและไม่ได้รับการสนับสนุนในหลาย ๆ ที่ แทนที่จะบอกว่าคุณควรใช้wheel
เหตุการณ์เนื่องจากคุณมีความเฉพาะเจาะจงมากขึ้นว่าค่าที่คุณได้รับหมายถึงอะไร รองรับโดยเบราว์เซอร์หลัก ๆ ส่วนใหญ่
หากใช้ปลั๊กอิน jquery mousewheel ที่กล่าวถึงแล้วสิ่งที่จะใช้อาร์กิวเมนต์ที่ 2 ของฟังก์ชันตัวจัดการเหตุการณ์ - delta
:
$('#my-element').on('mousewheel', function(event, delta) {
if(delta > 0) {
console.log('scroll up');
}
else {
console.log('scroll down');
}
});
ฉันพบปัญหาเดียวกันเมื่อเร็ว ๆ นี้ที่
$(window).mousewheel
กำลังกลับมาundefined
สิ่งที่ฉันทำคือ $(window).on('mousewheel', function() {});
ในการประมวลผลฉันใช้:
function (event) {
var direction = null,
key;
if (event.type === 'mousewheel') {
if (yourFunctionForGetMouseWheelDirection(event) > 0) {
direction = 'up';
} else {
direction = 'down';
}
}
}