Search code examples
jqueryhtmlsmooth-scrolling

JQuery SmoothDivScroll and arrow keys


I need to make JQuery SmoothDivScroll plugin works with arrow keyboard keys - left and right keys should scroll the content, as mouse wheels and hot spots do. How can I achieve this, using custom JQuery code?


Solution

  • I Solved it. Solution isn't pretty, but works. Moreover, code snippet should be moved to separate code file. TODO: refactor.

    1) "scrollableArea" div should have attribute tabindex. 2) In plugin code file, below code statement should be added to _create function. It should be refactored, because currently it is considerably copied from mousewheel event handler

    r.data("scrollableArea").keydown(function (e) {
    
                var arrow = { left: 37, up: 38, right: 39, down: 40 };
                var i,s,u;
    
                switch (e.keyCode || e.which) {
    
                    case arrow.left:
                        i = 1;
                        s = 0;
                        u = 1;
                        break;
    
                    case arrow.right:
                        i = -1;
                        s = 0;
                        u = -1;
                        break;
                }
    
                    if (r.data("enabled") && n.mousewheelScrolling.length > 0) {
                        var a;
                        n.mousewheelScrolling === "vertical" && u !== 0 ? (t.stopAutoScrolling(), e.preventDefault(), a = Math.round(n.mousewheelScrollingStep * u * -1), t.move(a)) :
                        n.mousewheelScrolling === "horizontal" && s !== 0 ? (t.stopAutoScrolling(), e.preventDefault(), a = Math.round(n.mousewheelScrollingStep * s * -1), t.move(a)) :
                            n.mousewheelScrolling === "allDirections" && (t.stopAutoScrolling(), e.preventDefault(), a = Math.round(n.mousewheelScrollingStep * i * -1), t.move(a));
                    }
                }),