Scrolling Jscrollpane by dragging content inside container?

jquery, jscrollpane

Solution

Try this. is it what you are looking for?

function initialiseVerticalScroll()
            {
                if (isScrollableV) {

                    container.append(
                        $('<div class="jspVerticalBar" />').append(
                            $('<div class="jspCap jspCapTop" />'),
                            $('<div class="jspTrack" />').append(
                                $('<div class="jspDrag" />').append(
                                    $('<div class="jspDragTop" />'),
                                    $('<div class="jspDragBottom" />')
                                )
                            ),
                            $('<div class="jspCap jspCapBottom" />')
                        )
                    );

                    verticalBar = container.find('>.jspVerticalBar');
                    /* ADDED CODE */
                    verticalBar.width(0);
                    /* ADDED CODE */
                    verticalTrack = verticalBar.find('>.jspTrack');
                    verticalDrag = verticalTrack.find('>.jspDrag');

                    if (settings.showArrows) {
                        arrowUp = $('<a class="jspArrow jspArrowUp" />').bind(
                            'mousedown.jsp', getArrowScroll(0, -1)
                        ).bind('click.jsp', nil);
                        arrowDown = $('<a class="jspArrow jspArrowDown" />').bind(
                            'mousedown.jsp', getArrowScroll(0, 1)
                        ).bind('click.jsp', nil);
                        if (settings.arrowScrollOnHover) {
                            arrowUp.bind('mouseover.jsp', getArrowScroll(0, -1, arrowUp));
                            arrowDown.bind('mouseover.jsp', getArrowScroll(0, 1, arrowDown));
                        }

                        appendArrows(verticalTrack, settings.verticalArrowPositions, arrowUp, arrowDown);
                    }

                    verticalTrackHeight = paneHeight;
                    container.find('>.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow').each(
                        function()
                        {
                            verticalTrackHeight -= $(this).outerHeight();
                        }
                    );


                    verticalDrag.hover(
                        function()
                        {
                            verticalDrag.addClass('jspHover');
                        },
                        function()
                        {
                            verticalDrag.removeClass('jspHover');
                        }
                    ).bind(
                        'mousedown.jsp',
                        function(e)
                        {
                            // Stop IE from allowing text selection
                            $('html').bind('dragstart.jsp selectstart.jsp', nil);

                            verticalDrag.addClass('jspActive');

                            var startY = e.pageY - verticalDrag.position().top;

                            $('html').bind(
                                'mousemove.jsp',
                                function(e)
                                {
                                    positionDragY(e.pageY - startY, false);
                                }
                            ).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
                            return false;
                        }
                    );
                    /* ADDED CODE */
                    container.bind("mousedown.jsp", function (e) 
                { 
                    // Stop IE from allowing text selection
                    $('html').bind('dragstart.jsp selectstart.jsp', nil);

                    var startY = verticalDrag.position().top;
                    var initialY = e.pageY;
                    $('html').bind(
                        'mousemove.jsp',
                        function(e)
                        {
                            positionDragY(startY - (e.pageY - initialY), false);
                        }
                    ).bind('mouseup.jsp mouseleave.jsp', cancelDrag);
                    return false;
                });
                    /* ADDED CODE */
                    sizeVerticalScrollbar();
                }
            }

Problem

I was wondering, would it be possible to scroll content by clicking and dragging on it like you would with your finger on an iPhone? Here's a Jscrollpane example on jsfiddle I thought about extending the scrollbar over the whole region and making it invisible, however I would like to maintain layer click functionality inside. ``` <div id="maincontainer"> <div id="MenuList" class="scroll-pane"> <div id="somelayer-one" onclick="alert('Jquery Function');">text</div> </div></div> ``` Is this possible? Thanks! Additional info I tried looking into the original plugin and tried to modify this: ``` function initialiseVerticalScroll() { if (isScrollableV) { container.append( $('<div class="jspVerticalBar" />').append( $('<div class="jspCap jspCapTop" />'), $('<div class="jspTrack" />').append( $('<div class="jspDrag" />').append( $('<div class="jspDragTop" />'), $('<div class="jspDragBottom" />') ) ), $('<div class="jspCap jspCapBottom" />') ) ); verticalBar = container.find('>.jspVerticalBar'); verticalTrack = verticalBar.find('>.jspTrack'); verticalDrag = verticalTrack.find('>.jspDrag'); if (settings.showArrows) { arrowUp = $('<a class="jspArrow jspArrowUp" />').bind( 'mousedown.jsp', getArrowScroll(0, -1) ).bind('click.jsp', nil); arrowDown = $('<a class="jspArrow jspArrowDown" />').bind( 'mousedown.jsp', getArrowScroll(0, 1) ).bind('click.jsp', nil); if (settings.arrowScrollOnHover) { arrowUp.bind('mouseover.jsp', getArrowScroll(0, -1, arrowUp)); arrowDown.bind('mouseover.jsp', getArrowScroll(0, 1, arrowDown)); } appendArrows(verticalTrack, settings.verticalArrowPositions, arrowUp, arrowDown); } verticalTrackHeight = paneHeight; container.find('>.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow').each( function() { verticalTrackHeight -= $(this).outerHeight(); } ); verticalDrag.hover( function() { verticalDrag.addClass('jspHover'); }, function() { verticalDrag.removeClass('jspHover'); } ).bind( 'mousedown.jsp', function(e) { // Stop IE from allowing text selection $('html').bind('dragstart.jsp selectstart.jsp', nil); verticalDrag.addClass('jspActive'); var startY = e.pageY - verticalDrag.position().top; $('html').bind( 'mousemove.jsp', function(e) { positionDragY(e.pageY - startY, false); } ).bind('mouseup.jsp mouseleave.jsp', cancelDrag); return false; } ); sizeVerticalScrollbar(); } } ``` I changed `verticalDrag = verticalTrack.find('>.jspDrag');` to `verticalDrag = verticalTrack.find('>#somelayer-one');`, however that did not work for some reason. However, I think that if changed properly - this might work. Any ideas?

Original source