Results 1 to 2 of 2

Thread: Slick Custom Scrollbar on Touch Screen Device

  1. #1
    Join Date
    Jun 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slick Custom Scrollbar on Touch Screen Device

    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.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,791
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    you could control the script by using button in line calls

    modify the script(shown in red)

    Code:
                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

    Code:
    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

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

    the buttons for horizontal

    Code:
     <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

    Code:
     <input type="button" name="" value="Scroll Right" onclick="zxcScroll('V','scrollcontent2',20);" />
     <input type="button" name="" value="Scroll Left" onclick="zxcScroll('V','scrollcontent2',-20);" />
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Slick Custom Scrollbar
    By fmalone in forum Dynamic Drive scripts help
    Replies: 18
    Last Post: 09-20-2012, 04:25 PM
  2. Slick Custom Scrollbar: Un-styled in IE
    By epseja in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-14-2012, 06:01 PM
  3. Slick Custom Scrollbar in IE
    By Mejse78 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-23-2012, 09:00 PM
  4. Resolved Slick Custom Scrollbar IE 7
    By kezza in forum Bug reports
    Replies: 2
    Last Post: 03-01-2012, 07:44 AM
  5. Resolved Slick Custom Scrollbar not working in ie
    By kezza in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-29-2012, 04:29 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •