jQuery에서 마우스 휠 이벤트를 보시겠습니까?
scrolljQuery에서 마우스 휠 이벤트 ( 이벤트 에 대해 이야기하지 않음)를 얻는 방법이 있습니까?
마우스 휠의 위 / 및 속도를 아래-sense 하는 것이 있습니다.
$(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
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;
});
여기 바닐라 솔루션이 있습니다. 함수에 전달 된 이벤트가 event.originalEventjQuery가 jQuery 이벤트의 속성으로 사용할 수있는 이벤트 인 경우 jQuery에서 사용할 수 있습니다 . 또는 callback아래 의 함수 안에 첫-th 줄 앞에 추가 : 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;
});
내 조합은 다음과 가변합니다. 아래 / 위로 스크롤 할 때마다 페이드 아웃되고 페이드 인됩니다. 머리말 헤더를 페이드 인하 기 위해 헤더로 스크롤해야합니다.
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를 3+ 작동하는에서 것을 사용 하는 것이 더 좋습니다 .jquery-wheel
jQuery 경로로 가고 싶지 않다면 MDN은 mousewheel이벤트 가 비표준이고 여러 곳에서 지원되지 않기 때문에 이벤트 사용에 매우주의를 기울 입니다. 대신 당신이 얻는 값의 의미에 대해 훨씬 더 구체적으로 얻을 수 있으므로 wheel이벤트 를 사용해야 한다고 말합니다 . 대부분의 주요 브라우저에서 지원됩니다.
언급 된 JQuery와 마우스 휠 플러그인 을 사용하는 경우 이벤트 핸들러 함수의 두-th 인수를 사용하는 [해석] 어떻 습니까 - 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';
}
}
}
참고 URL : https://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery
'IT' 카테고리의 다른 글
| iOS 7에서 UITextView 높이가있는 UITableViewCell? (0) | 2020.07.12 |
|---|---|
| 신속한 배열-색인이 존재하는지 확인 (0) | 2020.07.12 |
| getMinutes () 0-9- 두 자리 숫자를 표시하는 방법? (0) | 2020.07.12 |
| 숫자가 회문인지 어떻게 확인합니까? (0) | 2020.07.12 |
| IISExpress를 사용하여 SSL 연결 / 연결되어 (0) | 2020.07.12 |