I am looking to enhance the scrolling capability of my app to make it touch-friendly. I have already implemented scrolling using the mouse wheel, drag, and click functions. I recently tried using the touch-scroll plugin from touch-scroll to enable touch scrolling on iPad.

However, I encountered an issue where, upon adding the code, the div became somewhat scrollable but exhibited an elastic effect that caused it to return to the top. I am in search of a solution to enable smooth and proper scrolling behavior.

Note I attempted to use iscroll-4 without success.

Note Additionally, I am utilizing the website template provided by .

Initialization of the plugin:

<script src="https://github.com/neave/touch-scroll/raw/master/touch-scroll.min.js"></script>
<script>
    $(document).ready(function() {
        if (!!('ontouchstart' in window)) {
            $('#customScrollBox .container').touchScroll();
        }
    });
</script> 

My JavaScript:

$(window).load(function() {
    $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
    ImageViewMode($toolbar.data("imageViewMode"));
    //cache vars
    $customScrollBox=$("#customScrollBox");
    $customScrollBox_container=$("#customScrollBox .container");
    $customScrollBox_content=$("#customScrollBox .content");
    $dragger_container=$("#dragger_container");
    $dragger=$("#dragger");

    CustomScroller();

    function CustomScroller(){
        outerMargin=0;
        innerMargin=20;
        $customScrollBox.height($(window).height()-outerMargin);
        $dragger_container.height($(window).height()-innerMargin);
        visibleHeight=$(window).height()-outerMargin;
        if($customScrollBox_container.height()>visibleHeight){ //custom scroll depends on content height
            $dragger_container,$dragger.css("display","block");
            totalContent=$customScrollBox_content.height();
            draggerContainerHeight=$(window).height()-innerMargin;
            animSpeed=400; //animation speed
            easeType="easeOutCirc"; //easing type
            bottomSpace=1.05; //bottom scrolling space
            targY=0;
            draggerHeight=$dragger.height();
            $dragger.draggable({ 
                axis: "y", 
                containment: "parent", 
                drag: function(event, ui) {
                    Scroll();
                }, 
                stop: function(event, ui) {
                    DraggerOut();
                }
            });

            //scrollbar click
            $dragger_container.click(function(e) {
                var mouseCoord=(e.pageY - $(this).offset().top);
                var targetPos=mouseCoord+$dragger.height();
                if(targetPos<draggerContainerHeight){
                    $dragger.css("top",mouseCoord);
                    Scroll();
                } else {
                    $dragger.css("top",draggerContainerHeight-$dragger.height());
                    Scroll();
                }
            });

            //mousewheel
            $(function($) {
                $customScrollBox.bind("mousewheel", function(event, delta) {
                    vel = Math.abs(delta*10);
                    $dragger.css("top", $dragger.position().top-(delta*vel));
                    Scroll();
                    if($dragger.position().top<0){
                        $dragger.css("top", 0);
                        $customScrollBox_container.stop();
                        Scroll();
                    }
                    if($dragger.position().top>draggerContainerHeight-$dragger.height()){
                        $dragger.css("top", draggerContainerHeight-$dragger.height());
                        $customScrollBox_container.stop();
                        Scroll();
                    }
                    return false;
                });
            });

            function Scroll(){
                var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
                var draggerY=$dragger.position().top;
                targY=-draggerY*scrollAmount;
                var thePos=$customScrollBox_container.position().top-targY;
                $customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing
            }

            //dragger hover
            $dragger.mouseup(function(){
                DraggerOut();
            }).mousedown(function(){
                DraggerOver();
            });

            function DraggerOver(){
                $dragger.css("background", "url(round_custom_scrollbar_bg_over.png)");
            }

            function DraggerOut(){
                $dragger.css("background", "url(round_custom_scrollbar_bg.png)");
            }
        } else { //hide custom scrollbar if content is short
            $dragger,$dragger_container.css("display","none");
        }
    }

    //resize browser window functions
    $(window).resize(function() {
        FullScreenBackground("#bgimg"); //scale bg image
        $dragger.css("top",0); //reset content scroll
        $customScrollBox_container.css("top",0);
        $customScrollBox.unbind("mousewheel");
        CustomScroller();
    });

    LargeImageLoad($bgimg);
});