Нет событий в Mousewheel на Surface Pro 3 с IE11?

Question

Похоже, что IE11 на Windows 8.1 не отправляет события мыши с мультитач-прокруткой на точные сенсорные панели, например, на Cover Type для нового Surface Pro 3. Есть ли альтернативное событие, которое я мог бы прослушать? Фактическое событие прокрутки не будет работать, поскольку я эмулирую область прокрутки в своем приложении холста, захватывая входные данные.

Answer 1

Это ошибка. Пока это не исправлено, нет никакой работы. Я могу подтвердить, что он работает правильно с помощью 2-пальцевой прокрутки на сенсорных панелях Synaptics и колесиках мыши, но не с точными сенсорными планшетами (например, в Cover Type Cover 3, или 4, или в Surface Book). Это только проблема для Microsoft Edge & Internet Explorer. Chrome и Firefox обрабатывают точную сенсорную панель с двумя пальцами, прокручивающуюся точно так же, как и прокрутка с двумя пальцами другого сенсорного планшета.

Here является jsfiddle из кода ниже, чтобы проверить/проверить:

JS:

(function($) { 
    var $bg = $('.bg'), 
    $log = $('.log'), 
    xPos = 0; 

    // Define wheel event handler: 
    function onWheelEvent(e) { 
    // Prevent default behavior of scrolling the web page: 
    e.preventDefault(); 
    e.stopPropagation(); 

    // Determin the wheel's vertical scroll delta: 
    var wheelDeltaY = 0; 
    if ('deltaY' in e) { 
     if (e.deltaMode === 1) { 
     wheelDeltaY = ((Math.abs(e.deltaY) < 6) ? e.deltaY * -2 : -e.deltaY) * 20; 
     } else { 
     wheelDeltaY = -e.deltaY; 
     } 
    } else if ('wheelDeltaY' in e) { 
     wheelDeltaY = e.wheelDeltaY/120 * 20; 
    } else if ('wheelDelta' in e) { 
     wheelDeltaY = e.wheelDelta/120 * 20; 
    } else if ('detail' in e) { 
     wheelDeltaY = -e.detail/3 * 20; 
    } else { 
     $log.append('<p>unable to determine delta</p>'); 
    } 
    xPos = xPos + Math.round(wheelDeltaY); 
    $bg.css('background-position', xPos + 'px 0px'); 
    $log.append('<p>' + e.type + ' event scrolled by ' + wheelDeltaY + 'px. New X position: ' + xPos + '</p>'); 
    $log.scrollTop($log[0].scrollHeight); 
    }; 
    // Capture wheel events for all browsers 
    // (I'm not using jQuery's event subscription 
    // model to show it's not a jQuery problem): 
    $bg[0].addEventListener('wheel', onWheelEvent, false); 
    $bg[0].addEventListener('mousewheel', onWheelEvent, false); 
    $bg[0].addEventListener('DOMMouseScroll', onWheelEvent, false); 
})($); 

HTML:

<div class="tall"> 
    <!-- Force browser to show scroll bars --> 
    <div class="bg"> 
    <!--BG image we'll move horizontally --> 
    <div class="log"> 
     <!--Contain the event log--> 
     <h3>Scroll with mouse wheel or 2-finger scrolling here</h3> 
     <p> 
     Expected behavior: The background image (which is large and may take a minute to load) should shift horizontally when scrolling over the image, even though the page is tall enough to have a browser-created vertical scrollbar. 
     </p> 
     <p> 
     If you scroll the mouse over this image, and the page scrolls vertically (and this text isn't replaced with an event log), it means the event was not captured. 
     </p> 
    </div> 
    </div> 
</div> 

CSS:

.tall { 
    height: 2000px; 
} 

.bg { 
    width: 100%; 
    height: 300px; 
    background-image: url(http://i.imgur.com/DP6K9D8.gif); 
    background-position: 0px 0px; 
    background-repeat: repeat; 
    background-repeat-x: repeat; 
    background-repeat-y: no-repeat; 
    background-size: contain; 
    position: relative; 
} 

.log { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 40%; 
    padding: 10px; 
    background-color: rgba(255, 255, 255, 0.85); 
    color: #555; 
    max-height: 260px; 
    overflow: hidden; 
    font-size: 0.7em; 
    font-family: arial, sans-serif; 
}