jQuery에서 마우스 휠 이벤트를 얻습니까?
마우스 휠 이벤트를 가져올 수 있는 방법이 있습니까(말하지 않음).scroll이벤트) jQuery에서?
$(document).ready(function(){
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log('scrolling up !');
}
else{
console.log('scrolling down !');
}
});
});
둘 다에 구속력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에서 작동합니다.
편집 - 2016년 3월
오랜만에 이 문제를 다시 생각해보기로 했습니다.스크롤 이벤트에 대한 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+
참조:
- https://developer.mozilla.org/en-US/docs/Web/Events/scroll
- https://developer.mozilla.org/en-US/docs/Web/Events/wheel
2017년 현재는 그냥 글을 쓰시면 됩니다.
$(window).on('wheel', function(event){
// deltaY obviously records vertical scroll, deltaX and deltaZ exist too.
// this condition makes sure it's vertical scrolling that happened
if(event.originalEvent.deltaY !== 0){
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.originalEventjQuery가 jQuery 이벤트의 속성으로 사용할 수 있도록 합니다.아니면 안에 있으면.callback첫 번째 줄 앞에 추가하는 아래 함수:event = event.originalEvent;.
이 코드는 휠 속도/양을 정규화하며 일반적인 마우스에서 앞으로 스크롤하는 경우에는 양수이고 뒤로 마우스 휠을 움직이는 경우에는 음수입니다.
데모: http://jsfiddle.net/BXhzD/
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;
});
@다린디미트로프가 올린 플러그인은jquery-mousewheel, jQuery 3+로 깨졌습니다.jQuery 3+에서 작동하는 것을 사용하는 것이 더 좋을 것 같습니다.
jQuery 루트를 가기 싫다면 MDN은 이벤트가 표준에 맞지 않고 지원되지 않는 곳이 많기 때문에 이벤트를 사용하는 것에 대해 매우 주의를 기울입니다.대신에 당신이 의미하는 가치가 정확히 무엇인지에 대한 훨씬 더 구체적인 정보를 얻기 때문에 이벤트를 사용해야 한다고 말합니다.대부분의 주요 브라우저에서 지원합니다.
저의 조합은 이렇게 생겼습니다.아래/위로 스크롤할 때마다 점점 희미해집니다.그렇지 않으면 헤더를 페이딩하기 위해 헤더 위로 스크롤해야 합니다.
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;
});
언급한 jquery mousewheel plugin을 사용한다면 이벤트 핸들러 함수의 두번째 인수를 사용하는 것은 어떨까요 -delta:
$('#my-element').on('mousewheel', function(event, delta) {
if(delta > 0) {
console.log('scroll up');
}
else {
console.log('scroll down');
}
});
여러 가지 중요한 것들이 곳곳에 널려 있는 것 같고, 내가 원하는 대로 코드를 작동시키기 위해서는 모든 답을 읽어야 했기 때문에, 내가 발견한 내용을 한 곳에 게시하겠습니다.
- 당신은 사용해야 합니다.
"wheel"사용되지 않는 다른 이벤트 또는 브라우저 특정 이벤트에 대한 이벤트입니다. - 여기에 있는 많은 사람들은 뭔가 잘못된 것을 가지고 있습니다: 반대입니다.
x>0가x<=0그리고 그 반대의x<0가x>=0, 여기에 있는 많은 답변들은 아래로 스크롤하거나 위로 스크롤하는 것을 잘못 유발할 것입니다.x=0(horizon 스크롤). - 어떤 분이 어떻게 하면 감수성을 부여할 수 있냐고 물어보시는데, 이걸 사용할 수 있는 거죠.
setTimeout()50ms 정도의 지연으로 일부 도우미 플래그를 변경합니다.isWaiting=false그리고 당신은 당신 자신을 보호합니다.if(isWaiting)그럼 아무것도 하지 말아요실행 시 수동으로 변경합니다.isWaiting=true그리고 이 선 바로 아래에서 setTimeout을 다시 시작합니다. 나중에 변경할 사람.isWaiting=false50 ms 후에
나는 최근에 같은 문제가 생겼다 어디에$(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';
}
}
}
언급URL : https://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery
'programing' 카테고리의 다른 글
| 컴파일 시 스택 사용량 확인 (0) | 2023.10.27 |
|---|---|
| window cmd를 사용하여 사용자 권한을 보는 방법? (0) | 2023.10.27 |
| Spring 보안에서 하나를 제외한 모든 URL 허용 (0) | 2023.10.27 |
| 왜 문서가.내 자바스크립트에서 바디 널? (0) | 2023.10.22 |
| 열의 MySQL 합 요소 (0) | 2023.10.22 |