Horizontal Scroll any element with images or items inside of it


 

here a simple function to scroll an element with items it for example images, just give the function the element, then 1 callback for the scroll up event, and another callback for the scroll down event. feel free to update/extend this snippet.

 

 

        <script>

            var horizontalScroller = function(elm, callbackScrollUp, callbackScrollDown) {
                // detect available wheel event
                var supports = "onwheel" in document.createElement("div") ? "wheel" :   // Modern browsers support "wheel"
                    document.onmousewheel !== undefined ? "mousewheel" :                // Webkit and IE support at least "mousewheel"
                    "DOMMouseScroll";                                                   // let's assume that remaining browsers are older Firefox

                $(elm).bind('DOMMouseScroll mousewheel wheel', function(e) {
                    var direction = 0;
                    var flip = false;

                    switch (supports) {
                        case "mousewheel": // IE, and for safari the values are reversed here
                            direction = e.originalEvent.deltaY;
                            if (direction === undefined) {
                                direction = e.originalEvent.wheelDeltaY;
                                flip = true;
                            }

                            if (direction >= 0) {
                                (flip === true) ? callbackScrollUp(e) : callbackScrollDown(e);
                            } else {
                                (flip === true) ? callbackScrollDown(e) : callbackScrollUp(e);
                            }
                        break;
                        case "wheel": // FF, Chrome
                            direction = e.originalEvent.wheelDelta;;

                            if (direction === undefined) {
                                direction = e.originalEvent.deltaY;
                                flip = true;
                            }

                            if (direction >= 0) {
                                (flip === true) ? callbackScrollDown(e) : callbackScrollUp(e);
                            } else {
                                (flip === true) ? callbackScrollUp(e) : callbackScrollDown(e);
                            }
                        break;
                    default:
                        alert("other scroll type");
                        break;
                    }
                    console.log(flip);
                    e.preventDefault();
                });
            }

            var scrollUp = function(e) {
                console.log("scrolling up");
            }

            var scrollDown = function(e){
                console.log("scrolling down");
            }

            horizontalScroller(".row", scrollUp, scrollDown);
        </script>

About johnnblade aka johnnyblade Thugnology

C# Developer 9Ja Thugnology
This entry was posted in JQuery and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s