Slick Custom Scrollbar on Touch Screen Device

[cynde]

1) Script Title:
Slick Custom Scrollbar

2) http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

3) Describe problem:
How do I make this scrolling content work on touch screen?

I'm new to js, jquery.

Here is the site I need to fix:
jeffballardpr.com

If I have to, i could set the textbox to where it just stays completely open on tablet and smartphone, without the scroll.
I've been unable to make that work with this css:

@media screen and (min-width: 321px)
and (max-width: 768px) {

.scrollcontent1-bar {
width: 5px;
padding: 0px;
background-image:url(../image/ScrollerRail.jpg);
background-repeat:repeat-y;
background: #fff;
border-radius: 0px;
box-shadow: inset 0px 0px 1px;
overflow:auto; /*This is what causes the problem on touchscreen devices*/
}

div[rel='scrollcontent1'] {
width: 420px;
height: 1200px;
padding: 0 20px;
margin: 60px 260px 20px 0;
overflow:auto; /*This is what causes the problem on touchscreen devices*/
}
}
Thanks for your help.

[vwphillips]

you could control the script by using button in line calls

modify the script(shown in red)


elements: function( where ) {
drag.id.css( { overflow: "hidden", position: "relative" } );
drag.id.wrapInner( '<div id="' + drag.t + '-content" class="' + drag.t + '-content"></div>' );
drag.c = $( '.' + drag.t + '-content' );
drag.id.append( '<div class="' + drag.t + '-bar"></div>' );
drag.b = $( '.' + drag.t + '-bar' );
drag.b.append( '<div id="' + drag.t + '-drag" class="' + drag.t + '-drag"></div>' );
drag.s = $( '.' + drag.t + '-drag' );
},


additional script


function zxcScroll(m,id,ud){
var c=document.getElementById(id+'-content'),s=document.getElementById(id+'-drag'),o=zxcScroll[id];
if (c&&s&&!o){
o=o=zxcScroll[id]={
sp:s.parentNode,
cp:c.parentNode
}
}
if (o){
var m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?['left','offsetLeft','width','offsetWidth']:['top','offsetTop','height','offsetHeight'],x=o.cp[m[3]]-c[m[3]],n=Math.min(Math.max(c[m[1]]+ud,x),0);
c.style[m[0]]=n+'px';
s.style[m[0]]=(parseInt(o.sp.style[m[2]])-parseInt(s.style[m[2]]))*n/x+'px';
}
}




and for the DD examples



$( document ).ready( function() {
$( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical" } );
$( "div[rel='scrollcontent2']" ).customscroll( { direction: "horizontal", bounce:0 } );
});




the buttons for horizontal


<input type="button" name="" value="Scroll Up" onclick="zxcScroll('H','scrollcontent1',20);" />
<input type="button" name="" value="Scroll Down" onclick="zxcScroll('H','scrollcontent1',-20);" />



the buttons for vertical


<input type="button" name="" value="Scroll Right" onclick="zxcScroll('V','scrollcontent2',20);" />
<input type="button" name="" value="Scroll Left" onclick="zxcScroll('V','scrollcontent2',-20);" />