slimScroll scrolls to fast (wheelStep and touchScrollStep not working)

Question

I'm using slimScroll within a js project for a scroll bar on one side of the page. There are a lot of elements within the the scrollView and right now it's scrolling way to quickly and not intuitively. When I reduce the amount of wheel and/or touchScrollStep there is not change it speed.

* Version: 1.3.0
*
*/
(function($) {

jQuery.fn.extend({
slimScroll: function(options) {

  var defaults = {

    // width in pixels of the visible scroll area
    width : 'auto',

    // height in pixels of the visible scroll area
    height : '250px',

    // width in pixels of the scrollbar and rail
    size : '7px',

    // scrollbar color, accepts any hex/color value
    color: '#000',

    // scrollbar position - left/right
    position : 'right',

    // distance in pixels between the side edge and the scrollbar
    distance : '1px',

    // default scroll position on load - top / bottom / $('selector')
    start : 'top',

    // sets scrollbar opacity
    opacity : .4,

    // enables always-on mode for the scrollbar
    alwaysVisible : false,

    // check if we should hide the scrollbar when user is hovering over
    disableFadeOut : false,

    // sets visibility of the rail
    railVisible : false,

    // sets rail color
    railColor : '#333',

    // sets rail opacity
    railOpacity : .2,

    // whether  we should use jQuery UI Draggable to enable bar dragging
    railDraggable : true,

    // defautlt CSS class of the slimscroll rail
    railClass : 'slimScrollRail',

    // defautlt CSS class of the slimscroll bar
    barClass : 'slimScrollBar',

    // defautlt CSS class of the slimscroll wrapper
    wrapperClass : 'slimScrollDiv',

    // check if mousewheel should scroll the window if we reach top/bottom
    allowPageScroll : false,

    // scroll amount applied to each mouse wheel step
    wheelStep : 20,

    // scroll amount applied when user is using gestures
    touchScrollStep : 200,

    // sets border radius
    borderRadius: '7px',

    // sets border radius of the rail
    railBorderRadius : '7px'
  };

  var o = $.extend(defaults, options);

  // do it for every element that matches selector
  this.each(function(){

  var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
    barHeight, percentScroll, lastScroll,
    divS = '<div></div>',
    minBarHeight = 30,
    releaseScroll = false;

    // used in event handlers and for better minification
    var me = $(this);

    // ensure we are not binding it again
    if (me.parent().hasClass(o.wrapperClass))
    {
        // start from last bar position
        var offset = me.scrollTop();

        // find bar and rail
        bar = me.parent().find('.' + o.barClass);
        rail = me.parent().find('.' + o.railClass);

        getBarHeight();

        // check if we should scroll existing instance
        if ($.isPlainObject(options))
        {
          // Pass height: auto to an existing slimscroll object to force a resize after contents have changed
          if ( 'height' in options && options.height == 'auto' ) {
            me.parent().css('height', 'auto');
            me.css('height', 'auto');
            var height = me.parent().parent().height();
            me.parent().css('height', height);
            me.css('height', height);
          }

          if ('scrollTo' in options)
          {
            // jump to a static point
            offset = parseInt(o.scrollTo);
          }
          else if ('scrollBy' in options)
          {
            // jump by value pixels
            offset += parseInt(o.scrollBy);
          }
          else if ('destroy' in options)
          {
            // remove slimscroll elements
            bar.remove();
            rail.remove();
            me.unwrap();
            return;
          }

          // scroll content by the given offset
          scrollContent(offset, false, true);
        }

        return;
    }

    // optionally set height to the parent's height
    o.height = (o.height == 'auto') ? me.parent().height() : o.height;

    // wrap content
    var wrapper = $(divS)
      .addClass(o.wrapperClass)
      .css({
        position: 'relative',
        overflow: 'hidden',
        width: o.width,
        height: o.height
      });

    // update style for the div
    me.css({
      overflow: 'hidden',
      width: o.width,
      height: o.height
    });

    // create scrollbar rail
    var rail = $(divS)
      .addClass(o.railClass)
      .css({
        width: o.size,
        height: '100%',
        position: 'absolute',
        top: 0,
        display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
        'border-radius': o.railBorderRadius,
        background: o.railColor,
        opacity: o.railOpacity,
        zIndex: 90
      });

    // create scrollbar
    var bar = $(divS)
      .addClass(o.barClass)
      .css({
        background: o.color,
        width: o.size,
        position: 'absolute',
        top: 0,
        opacity: o.opacity,
        display: o.alwaysVisible ? 'block' : 'none',
        'border-radius' : o.borderRadius,
        BorderRadius: o.borderRadius,
        MozBorderRadius: o.borderRadius,
        WebkitBorderRadius: o.borderRadius,
        zIndex: 99
      });

    // set position
    var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
    rail.css(posCss);
    bar.css(posCss);

    // wrap it
    me.wrap(wrapper);

    // append to parent div
    me.parent().append(bar);
    me.parent().append(rail);

    // make it draggable and no longer dependent on the jqueryUI
    if (o.railDraggable){
      bar.bind("mousedown", function(e) {
        var $doc = $(document);
        isDragg = true;
        t = parseFloat(bar.css('top'));
        pageY = e.pageY;

        $doc.bind("mousemove.slimscroll", function(e){
          currTop = t + e.pageY - pageY;
          bar.css('top', currTop);
          scrollContent(0, bar.position().top, false);// scroll content
        });

        $doc.bind("mouseup.slimscroll", function(e) {
          isDragg = false;hideBar();
          $doc.unbind('.slimscroll');
        });
        return false;
      }).bind("selectstart.slimscroll", function(e){
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
    }

    // on rail over
    rail.hover(function(){
      showBar();
    }, function(){
      hideBar();
    });

    // on bar over
    bar.hover(function(){
      isOverBar = true;
    }, function(){
      isOverBar = false;
    });

    // show on parent mouseover
    me.hover(function(){
      isOverPanel = true;
      showBar();
      hideBar();
    }, function(){
      isOverPanel = false;
      hideBar();
    });

    // support for mobile
    me.bind('touchstart', function(e,b){
      if (e.originalEvent.touches.length)
      {
        // record where touch started
        touchDif = e.originalEvent.touches[0].pageY;
      }
    });

    me.bind('touchmove', function(e){
      // prevent scrolling the page if necessary
      if(!releaseScroll)
      {
          e.originalEvent.preventDefault();
          }
      if (e.originalEvent.touches.length)
      {
        // see how far user swiped
        var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
        // scroll content
        scrollContent(diff, true);
        touchDif = e.originalEvent.touches[0].pageY;
      }
    });

    // set up initial height
    getBarHeight();

    // check start position
    if (o.start === 'bottom')
    {
      // scroll content to bottom
      bar.css({ top: me.outerHeight() - bar.outerHeight() });
      scrollContent(0, true);
    }
    else if (o.start !== 'top')
    {
      // assume jQuery selector
      scrollContent($(o.start).position().top, null, true);

      // make sure bar stays hidden
      if (!o.alwaysVisible) { bar.hide(); }
    }

    // attach scroll events
    attachWheel();

    function _onWheel(e)
    {
      // use mouse wheel only when mouse is over
      if (!isOverPanel) { return; }

      var e = e || window.event;

      var delta = 0;
      if (e.wheelDelta) { delta = -e.wheelDelta/120; }
      if (e.detail) { delta = e.detail / 3; }

      var target = e.target || e.srcTarget || e.srcElement;
      if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
        // scroll content
        scrollContent(delta, true);
      }

      // stop window scroll
      if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
      if (!releaseScroll) { e.returnValue = false; }
    }

    function scrollContent(y, isWheel, isJump)
    {
      releaseScroll = false;
      var delta = y;
      var maxTop = me.outerHeight() - bar.outerHeight();

      if (isWheel)
      {
        // move bar with mouse wheel
        delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();

        // move bar, make sure it doesn't go out
        delta = Math.min(Math.max(delta, 0), maxTop);

        // if scrolling down, make sure a fractional change to the
        // scroll position isn't rounded away when the scrollbar's CSS is set
        // this flooring of delta would happened automatically when
        // bar.css is set below, but we floor here for clarity
        delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);

        // scroll the scrollbar
        bar.css({ top: delta + 'px' });
      }

      // calculate actual scroll amount
      percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
      delta = percentScroll * (me[0].scrollHeight - me.outerHeight());

      if (isJump)
      {
        delta = y;
        var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
        offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
        bar.css({ top: offsetTop + 'px' });
      }

      // scroll content
      me.scrollTop(delta);

      // fire scrolling event
      me.trigger('slimscrolling', ~~delta);

      // ensure bar is visible
      showBar();

      // trigger hide when scroll is stopped
      hideBar();
    }

    function attachWheel()
    {
      if (window.addEventListener)
      {
        this.addEventListener('DOMMouseScroll', _onWheel, false );
        this.addEventListener('mousewheel', _onWheel, false );
        this.addEventListener('MozMousePixelScroll', _onWheel, false );
      }
      else
      {
        document.attachEvent("onmousewheel", _onWheel)
      }
    }

    function getBarHeight()
    {
      // calculate scrollbar height and make sure it is not too small
      barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
      bar.css({ height: barHeight + 'px' });

      // hide scrollbar if content is not long enough
      var display = barHeight == me.outerHeight() ? 'none' : 'block';
      bar.css({ display: display });
    }

    function showBar()
    {
      // recalculate bar height
      getBarHeight();
      clearTimeout(queueHide);

      // when bar reached top or bottom
      if (percentScroll == ~~percentScroll)
      {
        //release wheel
        releaseScroll = o.allowPageScroll;

        // publish approporiate event
        if (lastScroll != percentScroll)
        {
            var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
            me.trigger('slimscroll', msg);
        }
      }
      else
      {
        releaseScroll = false;
      }
      lastScroll = percentScroll;

      // show only when required
      if(barHeight >= me.outerHeight()) {
        //allow window scroll
        releaseScroll = true;
        return;
      }
      bar.stop(true,true).fadeIn('fast');
      if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); }
    }

    function hideBar()
    {
      // only hide when options allow it
      if (!o.alwaysVisible)
      {
        queueHide = setTimeout(function(){
          if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
          {
            bar.fadeOut('slow');
            rail.fadeOut('slow');
          }
        }, 1000);
      }
    }

  });

  // maintain chainability
  return this;
 }
});

jQuery.fn.extend({
 slimscroll: jQuery.fn.slimScroll
});

 })(jQuery);

Answer 1

I've just played around with this script and I kept adjusting the numbers and these are the numbers that felt more natural to me.

wheelStep : 10,
touchScrollStep : 75

The only thing I'm not happy with is how it doesn't understand how fast you scrolled with touch events, so it doesn't have that inertia effect like native iOS does naturally. I'm hoping they'll add that option soon.