Scroll
HTML
<div id="scroll">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</div>
<button>Append</button>
<p>When you append an item it will scroll down but if you were to use the scrollwheel over it, it jumps back to the 'bottom' position at 10</p>
CSS
#scroll{
background:red;
font-size:20px;
}
JavaScript
$(document).ready(function(){
$('#scroll').slimScroll({
height: '200px',
width: '80px',
start: 'bottom'
});
var i=10;
$('button').click(function(){
i++
$('#scroll').append(i+'<br>');
$('#scroll').scrollTop(9999999);
});
});
/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version: 0.5.0
*
*/
(function($) {
jQuery.fn.extend({
slimScroll: function(options) {
var defaults = {
wheelStep : 20,
width : 'auto',
height : '250px',
size : '7px',
color: '#000',
position : 'right',
distance : '1px',
start : 'bottom',
opacity : .4,
alwaysVisible : false,
railVisible : false,
railColor : '#333',
railOpacity : '0.2',
railClass : 'slimScrollRail',
barClass : 'slimScrollBar',
wrapperClass : 'slimScrollDiv',
allowPageScroll: false,
scroll: 0
};
var o = ops = $.extend( defaults , options );
// do it for every element that matches selector
this.each(function(){
var isOverPanel, isOverBar, isDragg, queueHide, barHeight, percentScroll,
divS = '<div></div>',
minBarHeight = 30,
releaseScroll = false,
wheelStep = parseInt(o.wheelStep),
cwidth = o.width,
cheight = o.height,
size = o.size,
color = o.color,
position = o.position,
distance = o.distance,
start = o.start,
opacity = o.opacity,
alwaysVisible = o.alwaysVisible,
railVisible = o.railVisible,
railColor = o.railColor,
railOpacity = o.railOpacity,
allowPageScroll = o.allowPageScroll,
scroll = o.scroll;
// used in...