Scrolling Jscrollpane by dragging and dropping content inside a container?

Question

I was wondering if it is possible to scroll content by tapping and dragging it, as if with a finger on the iPhone?

Here is a jscrollpane example on jsfiddle

I was thinking about expanding the scrollbar throughout the region and making it invisible, however I would like to maintain the functionality of clicking the layer inside.

<div id="maincontainer"> <div id="MenuList" class="scroll-pane"> <div id="somelayer-one" onclick="alert('Jquery Function');">text</div> </div></div> 

Is it possible? Thanks!

Additional Information

I tried to learn the source plugin and tried to change 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'); on verticalDrag = verticalTrack.find('>#somelayer-one'); However, this for some reason did not work. However, I think that if it changes correctly, it might work. Any ideas?

Answer 1

Try it. Is this 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

Extension of the scroll bar and its invisibility. I am pretty sure that it’s much harder to achieve than what you ask. This was probably done a million times, and perhaps draggable () will 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, http://jsfiddle.net/apDrX/1/

Answer 3

Try the following:

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 })​ 

Answer 4

Not quite an answer, since it does not describe the setting of jScrollPane, BUT . I would recommend using a (incredibly powerful) plugin called iScroll , IF , this is an option for switching plugins.

It does almost the same job, allows you to customize the scroll bar (as in jScrollPane), is compatible with mobile browsers, uses hardware accelerated CSS transformations, where available, retains the functionality of clicks in its container, etc.

http://cubiq.org/iscroll-4