jquery.accel-hover-scroll demo

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

by machty

HTML

<script src="https://raw.github.com/useful-robot/jquery.accel-hover-scroll/master/scripts/jquery.accel-hover-scroll.js"></script>
<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: 105px;
    margin-top: 100px;
    background: #dddddd;
    padding: 5px;
    border: 1px solid black;
    position: relative;
}

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

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

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

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

JavaScript

$(function() {
    $('.hoverscroll').accelHoverScroll({
        // Default settings
        
        // The scroll speed right at the edge of the
        // container, pixels per second
        maxScrollSpeed: 800,
        
        // Percentage of the container's width that'll
        // be hover-scrollable. Choose a small value if
        // you'd like a wider center region where no
        // scrolling occurs.
        scrollGutterPercentage: 0.3,
        
        // You probably won't need to change this, but
        // internally, the scroll speed is determined
        // according to which 'slice' of the gutter the
        // cursor falls in. In other words, there isn't
        // a perfect smooth gradient from slow to fast, but
        // rather small slices that you probably won't notice
        // or need to change. It's sliced this way for efficiency
        // purposes; this plugin utilizes jQuery.fn.animate for
        // its scrolling, and constantly changing the speed of the
        // scroll based on single pixel changes in the mouse location
        // can lead to some choppiness, particularly if there
        // are images involved, or if you're using the 
        // CSS3 transition-enabled jQuery.animation-enhanced
        // plugin
        scrollGutterSlices: 5,
        
        // Control whether cursor changes to left/right
        // arrows when hover-scrolling.
        overrideCursor: true
    });
});