title: javascript scrolling touch scroll
body: <p>I want to add touch scrolling to my app. I have already got scrolling with the mouse wheel, drag, click, etc. I have (sort of) managed to get the scrolling to work on iPad using a plugin called <a href="https://github.com/neave/touch-scroll/raw/master/touch-scroll.min.js" rel="nofollow">touch-scroll</a>. </p>
  
  <p>The problem is that when I add the code, the div becomes sort of scrollable, but goes back to the top (elastic effect). I am wondering how can I make it scroll properly.  </p>
  
  <p><strong>Note</strong> <em>I have tried iscroll-4 but it did not work for me.</em></p>
  
  <p><strong>Note</strong> <em>Also I am using the website template from <a href="http://manos.malihu.gr/sideways-jquery-fullscreen-image-gallery" rel="nofollow">http://manos.malihu.gr/sideways-jquery-fullscreen-image-gallery</a>.</em></p>
  
  <p><strong>Initializing the plugin:</strong></p>
  
  <pre><code>&lt;script src="https://github.com/neave/touch-scroll/raw/master/touch-scroll.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function() {
          if (!!('ontouchstart' in window)) {
              $('#customScrollBox .container').touchScroll();
          }
      });
  &lt;/script&gt; 
  </code></pre>
  
  <p><strong>My Javascript</strong></p>
  
  <pre><code>$(window).load(function() {
      $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
      ImageViewMode($toolbar.data("imageViewMode"));
      //cache vars
      $customScrollBox=$("#customScrollBox");
      $customScrollBox_container=$("#customScrollBox .container");
      $customScrollBox_content=$("#customScrollBox .content");
      $dragger_container=$("#dragger_container");
      $dragger=$("#dragger");
  
      CustomScroller();
  
      function CustomScroller(){
          outerMargin=0;
          innerMargin=20;
          $customScrollBox.height($(window).height()-outerMargin);
          $dragger_container.height($(window).height()-innerMargin);
          visibleHeight=$(window).height()-outerMargin;
          if($customScrollBox_container.height()&gt;visibleHeight){ //custom scroll depends on content height
              $dragger_container,$dragger.css("display","block");
              totalContent=$customScrollBox_content.height();
              draggerContainerHeight=$(window).height()-innerMargin;
              animSpeed=400; //animation speed
              easeType="easeOutCirc"; //easing type
              bottomSpace=1.05; //bottom scrolling space
              targY=0;
              draggerHeight=$dragger.height();
              $dragger.draggable({ 
                  axis: "y", 
                  containment: "parent", 
                  drag: function(event, ui) {
                      Scroll();
                  }, 
                  stop: function(event, ui) {
                      DraggerOut();
                  }
              });
  
              //scrollbar click
              $dragger_container.click(function(e) {
                  var mouseCoord=(e.pageY - $(this).offset().top);
                  var targetPos=mouseCoord+$dragger.height();
                  if(targetPos&lt;draggerContainerHeight){
                      $dragger.css("top",mouseCoord);
                      Scroll();
                  } else {
                      $dragger.css("top",draggerContainerHeight-$dragger.height());
                      Scroll();
                  }
              });
  
              //mousewheel
              $(function($) {
                  $customScrollBox.bind("mousewheel", function(event, delta) {
                      vel = Math.abs(delta*10);
                      $dragger.css("top", $dragger.position().top-(delta*vel));
                      Scroll();
                      if($dragger.position().top&lt;0){
                          $dragger.css("top", 0);
                          $customScrollBox_container.stop();
                          Scroll();
                      }
                      if($dragger.position().top&gt;draggerContainerHeight-$dragger.height()){
                          $dragger.css("top", draggerContainerHeight-$dragger.height());
                          $customScrollBox_container.stop();
                          Scroll();
                      }
                      return false;
                  });
              });
  
              function Scroll(){
                  var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
                  var draggerY=$dragger.position().top;
                  targY=-draggerY*scrollAmount;
                  var thePos=$customScrollBox_container.position().top-targY;
                  $customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing
              }
  
              //dragger hover
              $dragger.mouseup(function(){
                  DraggerOut();
              }).mousedown(function(){
                  DraggerOver();
              });
  
              function DraggerOver(){
                  $dragger.css("background", "url(round_custom_scrollbar_bg_over.png)");
              }
  
              function DraggerOut(){
                  $dragger.css("background", "url(round_custom_scrollbar_bg.png)");
              }
          } else { //hide custom scrollbar if content is short
              $dragger,$dragger_container.css("display","none");
          }
      }
  
      //resize browser window functions
      $(window).resize(function() {
          FullScreenBackground("#bgimg"); //scale bg image
          $dragger.css("top",0); //reset content scroll
          $customScrollBox_container.css("top",0);
          $customScrollBox.unbind("mousewheel");
          CustomScroller();
      });
  
      LargeImageLoad($bgimg);
  });
  </code></pre>