jquery.accel-hover-scroll demo

See https://github.com/useful-robot/jquery.accel-hover-scroll for more info

by B L Praveen

HTML

<div class="hoverscroll">
    <div class="hoverscroll-content">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
    </div>
    <div class="hoverscroll-left">&larr;</div>
    <div class="hoverscroll-right">&rarr;</div>
</div>
<p>
    Try mousing over the above, particular on the left and right edges.
</p>

CSS

.hoverscroll {
    height: 500px;
    width:105px;
    margin-top: 100px;
    background: #dddddd;
    padding: 5px;
    border: 1px solid black;
    position: relative;
    overflow:hidden

}

.hoverscroll-content {
   
    white-space: nowrap;
}

.hoverscroll-left {
    position: absolute;
    top: 45%;
    left: 0;
}

.hoverscroll-right {
    position: absolute;
    top: 45%;
    right: 0;
}

.content-item {
    display: block;
    background: #ffcccc;
    border: 1px solid black;
    margin-right: 3px;
    width: 100px;
    height: 100px;
}

JavaScript

/*
# AccelHoverScroll v0.1
# Accelerated Hoverscroll: mouse over the left or right sides
# of a container and the containerw will scroll in that direction,
# the closer to the edge of the container the faster it goes.
#
# Do as thou wilt with this code but send any surplus love
# over to usefulrobot.io
#
# Copyright 2012 Alex Matchneer / Useful Robot
*/


(function() {
  var $,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  $ = jQuery;

  $.AccelHoverScroll = (function() {

    function AccelHoverScroll(element, options) {
      var position;
      if (options == null) {
        options = {};
      }
      this._onMouseMove = __bind(this._onMouseMove, this);

      this._reset = __bind(this._reset, this);

      this._onMouseLeave = __bind(this._onMouseLeave, this);

      this._onMouseEnter = __bind(this._onMouseEnter, this);

      this._onResize = __bind(this._onResize, this);

      this.$outerContainer = $(element);
      this.dimen = {};
      this.options = {
        maxScrollSpeed: 800,
        scrollGutterPercentage: 0.3,
        scrollGutterSlices: 5,
        overrideCursor: true,
	direction:'horizontal',
      };
      $.extend(this.options, options);
      this.defaultCursor = this.$outerContainer.css('cursor');
      this.$contentContainer = this.$outerContainer.find('.hoverscroll-content');
      if (!this.$contentContainer.length) {
        console.log("accelHoverScroll: Couldn't find required .hoverscroll-content class");
        return;
      }
      position = this.$contentContainer.css('position');
      if (position !== 'relative' && position !== 'absolute') {
        position = 'relative';
      }
      this.$contentContainer.css({
        position: position,
      });

      if(this.options.direction == 'horizontal') {
	  this.dimen['length']  = 'width';
	  this.dimen['start']  = 'left';	
	  this.dimen['end']  = 'right';
	  this.dimen['outer']  = 'outerWidth';
	  this.dimen['cursor']  =...