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;

}

.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 top or bottom 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
#
# Copybottom 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.options = {
        maxScrollSpeed: 800,
        scrollGutterPercentage: 0.3,
        scrollGutterSlices: 5,
        overrideCursor: true
      };
      $.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,
        top: "0px"
      });
     this.$contentContainer.orginalHeight =     this.$contentContainer.outerHeight(true);
     this.$outerContainer.orginalHeight =     this.$outerContainer.height();

      this.$outerContainer.css({
        overflow: 'hidden',
   	height: '500px'
      });
    ...