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?
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();
}
}
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With