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)


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) {
}, function () {
        $(document).unbind('mousewheel DOMMouseScroll');


In your related JavaScript file and add:

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


Please refresh your page and try it again.

Is this page helpful?

Leave a Reply

Your email address will not be published.