Scrolling Jscrollpane by dragging content inside container?

Question

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?

Answer 1

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();
                }
            }

Answer 2

Extending the scrollbar and making it invisible. I'm pretty sure that would be a lot more difficult to achieve than what you're asking. It's probably been done a million times and possibly draggable() would work... but without any plugins:

CSS

#maincontainer
{
    position:absolute;
}​

jQuery

$('#maincontainer').on('mousedown', function(e){
    $(this).data('held', e.screenY - $(this).offset().top);
}).on('mouseup', function(){
    $(this).data('held', false);
}).on('mousemove', function(e){
    if ($(this).data('held')!=false) $(this).css({top:e.screenY - $(this).data('held')});
});​

edit: using your html, this http://jsfiddle.net/apDrX/1/