jquery.slimscroll.js兼容firefox和动态高度计算

//解决了两个问题：
//1、当页面只有一屏时，动态增加menu子节点，展开树状结构时，动态计算树的高度，不然第一次滚动时会出现滚动很多的情况
//解决方法：在338行，增加动态计算高度 getBarHeight();
//2、firefox中鼠标中键滚动会出现两次执行_onWheel函数，无法正常使用

//解决方法：在395行，删除this.addEventListener('MozMousePixelScroll', _onWheel, false );

/*! 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: 1.3.1
*
*/
(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 scrollbar from 20 to 8
wheelStep : 8,

// 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);
} else if ('height' in options) {
var h = options.height;
me.parent().css('height', h);
me.css('height', h);
}

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);
console.log("mousedown");
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)
{
// recalculate bar height fengyuanwei 2016.11.9 scrollbar smooth
getBarHeight();

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 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'); }
}

});

// maintain chainability
return this;
}
});

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

})(jQuery);

jquery.slimscroll.js兼容firefox和动态高度计算相关推荐

针对模拟滚动条插件(jQuery.slimscroll.js)的修改
在开发过程中程序员总会碰到产品经理提出的各种稀奇古怪的需求,尽管有些需求很奇葩,但不得不说有些须有还是能指引我们不断的学习与进步,最近在工作中就碰到这种问题.需求是要求在各主流浏览器上使用自定义的滚动 ...
jquery.slimscroll.js 插件库的应用
调用 <script src="js/jquery.slimscroll.js"></script> 滚动条样式设置 $(".text" ...
mysql w3scoll_jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动. jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大 ...
一个很好的滚动条插件jquery.slimscroll.js
该插件的下载地址: https://codeload.github.com/rochal/jQuery-slimScroll/zip/v1.3.0 安装Set up 首先需要引入jquery 在次需要 ...
插件五之滚动条jquery.slimscroll.js
前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测 ...
jquery.slimscroll.min.js轮动条插件
引用: <script src="js/jquery.min.js"></script> <script src="js/jquery. ...
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
JS获取DIV动态高度，并赋值到其style样式中
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器 1.demo 可直接复制使用,需要在环境里运行. 2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xa ...

jquery.slimscroll.js兼容firefox和动态高度计算

jquery.slimscroll.js兼容firefox和动态高度计算相关推荐

最新文章

热门文章