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

Not really an answer as it doesn't describe adjusting jScrollPane, BUT I would recommend using the (incredible powerful) plugin called iScroll, IF it is an option to switch plugins.

It does pretty much the same job, let's you customize the scrollbar (as with jScrollPane), is compatible with mobile browsers, uses hardware accelerated CSS transforms where available, retains click functionality in its container, etc.

http://cubiq.org/iscroll-4

Answer 3

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/

Answer 4

Try this:

http://jsfiddle.net/kHvHb/5/

​var scroll = $('.scroll-pane').jScrollPane();
var api = scroll.data('jsp');


$('.jspPane div').mouseup(function(){
    var miY = $(this).position().top + $('.jspPane').position().top
    console.log( $('.jspPane').position().top);
    api.scrollTo(0,miY);
    return false
})

​