Dynamic Web TWAIN: How to navigate images by mousewheel

With Javascript code, you will be able to navigate images in buffer by mousewheel up / down event. Sample Code:

window.onload = function () {
     document.onscroll = MouseScroll;
}

function MouseScroll(evt) {
    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
    if (document.attachEvent) 
        document.attachEvent("on" + mousewheelevt, NavigateImages);
    else if (document.addEventListener) ;
        document.addEventListener(mousewheelevt, NavigateImages, false)
}

function NavigateImages(e) {
    var evt = window.event || e;
    var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta;
    if (delta < 0) btnNextImage_onclick(); else if (delta > 0)
        btnPreImage_onclick();
}

 

However, here comes up another question: How to disable the page scrollbar when moving images?

Here are the code snippets to make the interface more user-friendly, which would achieve:

  1. When mouse is over the control, moving mousewheel will navigate images.
  2. When mouse is not over the control, moving mousewheel will scroll up / down the page.

In your display page (e.g. ASP.NET), please add:

$('#DWTcontainer').hover(function () {
        $(document).bind('mousewheel DOMMouseScroll', function (event) {
            stopWheel(event);
        });
}, function () {
        $(document).unbind('mousewheel DOMMouseScroll');
}); 

 

In your related JavaScript file and add:

function stopWheel(e) {
    if (!e) {
        e = window.event;
    }
    if (e.preventDefault) { 
        e.preventDefault();
    }
    e.returnValue = false; 
} 

 

Please refresh your page and try it again.