Привязка к колесу прокрутки, когда над делом - PullRequest
Новая
       43

Привязка к колесу прокрутки, когда над делом

26 голосов
/ 15 сентября 2010

Я создаю графический редактор в браузере, и у меня есть код для всех моих элементов управления. Теперь я хотел бы отобразить горячие клавиши и кнопки мыши. Клавиатура простая, а мышь нет.

Мне нужно определить, когда мышь находится над div холста и когда колесо мыши перемещается над ним. Мышь над частью не жесткая, она связана с колесом мыши, с которым у меня проблемы.

Я попытался jQuery.scroll, но это работает только при работе, если div под колесом настроено на прокрутку. Мой canvas нет. Это смещение контролируется моими скриптами.

Что следует отметить:

  • Я использую jQuery в качестве своей базы.
  • Я вообще ничего не прокручиваю, я пытаюсь привязать и обработать колесо прокрутки без фактической прокрутки.

Структура 

<div id="pageWrap">
    [page head stuff...]
    <div id="canvas">
        [the guts of the canvas go here; lots of various stuff...]
    <div>
    [page body and footer stuff...]
</div>

Ответы [ 5 ]

28 голосов
/ 15 сентября 2010

Очень простая реализация будет выглядеть так: 

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta/120 > 0) {
            $(this).text('scrolling up !');
        }
        else{
            $(this).text('scrolling down !');
        }
    });
});​

http://www.jsfiddle.net/5t2MN/5/

15 голосов
/ 27 января 2015

Важное обновление 01/2015 - событие mousewheel устарело:

Тем временем событие mousewheel устарело и заменено на wheel.

Документы MDN для колесика мыши говорят:

Не использовать это событие колеса.

Этот интерфейс нестандартныйи не рекомендуется.Он использовался только в браузерах не Gecko.Вместо этого используйте стандартное событие колеса.

Теперь вы должны использовать что-то вроде: 

// This function checks if the specified event is supported by the browser.
// Source: http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
function isEventSupported(eventName) {
    var el = document.createElement('div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
}

$(document).ready(function() {
    // Check which wheel event is supported. Don't use both as it would fire each event 
    // in browsers where both events are supported.
    var wheelEvent = isEventSupported('mousewheel') ? 'mousewheel' : 'wheel';

    // Now bind the event to the desired element
    $('#foo').on(wheelEvent, function(e) {
        var oEvent = e.originalEvent,
            delta  = oEvent.deltaY || oEvent.wheelDelta;

        // deltaY for wheel event
        // wheelData for mousewheel event

        if (delta > 0) {
            // Scrolled up
        } else {
            // Scrolled down
        }
    });
});

PS

Для комментария из Connell Watkins - "Could"Вы объясняете деление на 120? ",
есть некоторые подробности о MSDN :

Событие onmousewheel - единственное событие, которое раскрывает свойство wheelDelta.Это свойство указывает расстояние, на которое повернула кнопка колеса, выраженное в кратных 120. Положительное значение указывает, что кнопка колеса повернулась от пользователя.Отрицательное значение указывает на то, что кнопка колеса повернулась к пользователю.

Я пропустил часть delta / 120 в своем методе, поскольку IMO не приносит никакой пользы.Прокрутка вверх delta > 0 и вниз delta < 0.Простой.

3 голосов
/ 15 сентября 2010

Вы пробовали плагин колесика мыши?

http://www.ogonek.net/mousewheel/jquery-demo.html

2 голосов
/ 28 ноября 2012

Простой пример привязки колесика мыши с помощью jquery .... 

<!DOCTYPE html>
<html>
<head>
<title>Mouse Wheel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<style type='text/css'>
body { text-align: center; }
#res
{
    margin-top: 200px;
    font-size: 128px;
    font-weight: bold;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
    var num = 0;
    $(document).bind('mousewheel',function(e){
        if (e.wheelDelta == "120")
        {
            $("#res").text(++num);
        }
        else
        {
            $("#res").text(--num);
        }
    });
});
</script>
</head>
<body>
<div id="res">0</div>
</body>
</html>
1 голос
/ 25 февраля 2017

e.wheelDelta не работает для меня.

Это сработало: 

$(document).ready(function(){
    $('#foo').bind('mousewheel',function(e){
        if (e.originalEvent.wheelDelta == 120){
		//mouse up
        }
        else
        {
		//mouse down
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...