$(function(){
$("#all").css({"height":"auto","width":"100%","overflow":"hidden","float":"left"})//追加样式
if($(document).height() >$(window).height()){
$("#all").css({"height":$(window).height()-35,"width":"100%","overflow":"auto","float":"left"})//追加样式
}
$(window).resize(function(){
$("#all").css({"height":"auto","width":"100%","overflow":"auto","float":"left"})//追加样式
if( $("#all").height() >= $(window).height()-35() ){
$("#all").css({"height":$(window).height()-35,"width":"100%","overflow":"auto","float":"left"})//追加样式
}else{
$("#all").css({"height":$(window).height()-35,"width":"100%","overflow":"hidden","float":"left"})//追加样式
}
})
}) 将要添加滚动条的部分用<DIV ID="all" ></div> 包含进来
</script>
<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>js滚动条特效</title>
<style type="text/css">
*{ margin:0padding:0}
p{ height:1000px}
#mainBox{ width:400pxheight:500pxborder:1px #bbb solidposition:relativeoverflow:hiddenmargin:50px auto}
#content{ height:2500pxposition:absoluteleft:0top:0background:url(/jscss/demoimg/logo_demo1.gif) }
.scrollDiv{ width:18px position:absolutetop:0background:#666border-radius:10px}
</style>
</head>
<body>
<div id="mainBox">
<div id="content"></div>
</div>
<p></p>
<script type="text/javascript">
var doc=document
var _wheelData=-1
var mainBox=doc.getElementById('mainBox')
function bind(obj,type,handler){
var node=typeof obj=="string"?$(obj):obj
if(node.addEventListener){
node.addEventListener(type,handler,false)
}else if(node.attachEvent){
node.attachEvent('on'+type,handler)
}else{
node['on'+type]=handler
}
}
function mouseWheel(obj,handler){
var node=typeof obj=="string"?$(obj):obj
bind(node,'mousewheel',function(event){
var data=-getWheelData(event)
handler(data)
if(document.all){
window.event.returnValue=false
}else{
event.preventDefault()
}
})
//火狐
bind(node,'DOMMouseScroll',function(event){
var data=getWheelData(event)
handler(data)
event.preventDefault()
})
function getWheelData(event){
var e=event||window.event
return e.wheelDelta?e.wheelDelta:e.detail*40
}
}
function addScroll(){
this.init.apply(this,arguments)
}
addScroll.prototype={
init:function(mainBox,contentBox,className){
var mainBox=doc.getElementById(mainBox)
var contentBox=doc.getElementById(contentBox)
var scrollDiv=this._createScroll(mainBox,className)
this._resizeScorll(scrollDiv,mainBox,contentBox)
this._tragScroll(scrollDiv,mainBox,contentBox)
this._wheelChange(scrollDiv,mainBox,contentBox)
this._clickScroll(scrollDiv,mainBox,contentBox)
},
//创建滚动条
_createScroll:function(mainBox,className){
var _scrollBox=doc.createElement('div')
var _scroll=doc.createElement('div')
var span=doc.createElement('span')
_scrollBox.appendChild(_scroll)
_scroll.appendChild(span)
_scroll.className=className
mainBox.appendChild(_scrollBox)
return _scroll
},
//调整滚动条
_resizeScorll:function(element,mainBox,contentBox){
var p=element.parentNode
var conHeight=contentBox.offsetHeight
var _width=mainBox.clientWidth
var _height=mainBox.clientHeight
var _scrollWidth=element.offsetWidth
var _left=_width-_scrollWidth
p.style.width=_scrollWidth+"px"
p.style.height=_height+"px"
p.style.left=_left+"px"
p.style.position="absolute"
p.style.background="#ccc"
contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px"
var _scrollHeight=parseInt(_height*(_height/conHeight))
if(_scrollHeight>=mainBox.clientHeight){
element.parentNode.style.display="none"
}
element.style.height=_scrollHeight+"px"
},
//拖动滚动条
_tragScroll:function(element,mainBox,contentBox){
var mainHeight=mainBox.clientHeight
element.onmousedown=function(event){
var _this=this
var _scrollTop=element.offsetTop
var e=event||window.event
var top=e.clientY
//this.onmousemove=scrollGo
document.onmousemove=scrollGo
document.onmouseup=function(event){
this.onmousemove=null
}
function scrollGo(event){
var e=event||window.event
var _top=e.clientY
var _t=_top-top+_scrollTop
if(_t>(mainHeight-element.offsetHeight)){
_t=mainHeight-element.offsetHeight
}
if(_t<=0){
_t=0
}
element.style.top=_t+"px"
contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px"
_wheelData=_t
}
}
element.onmouseover=function(){
this.style.background="#444"
}
element.onmouseout=function(){
this.style.background="#666"
}
},
//鼠标滚轮滚动，滚动条滚动
_wheelChange:function(element,mainBox,contentBox){
var node=typeof mainBox=="string"?$(mainBox):mainBox
var flag=0,rate=0,wheelFlag=0
if(node){
mouseWheel(node,function(data){
wheelFlag+=data
if(_wheelData>=0){
flag=_wheelData
element.style.top=flag+"px"
wheelFlag=_wheelData*12
_wheelData=-1
}else{
flag=wheelFlag/12
}
if(flag<=0){
flag=0
wheelFlag=0
}
if(flag>=(mainBox.offsetHeight-element.offsetHeight)){
flag=(mainBox.clientHeight-element.offsetHeight)
wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12
}
element.style.top=flag+"px"
contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px"
})
}
},
_clickScroll:function(element,mainBox,contentBox){
var p=element.parentNode
p.onclick=function(event){
var e=event||window.event
var t=e.target||e.srcElement
var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop
var top=mainBox.offsetTop
var _top=e.clientY+sTop-top-element.offsetHeight/2
if(_top<=0){
_top=0
}
if(_top>=(mainBox.clientHeight-element.offsetHeight)){
_top=mainBox.clientHeight-element.offsetHeight
}
if(t!=element){
element.style.top=_top+"px"
contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px"
_wheelData=_top
}
}
}
}
new addScroll('mainBox','content','scrollDiv')
</script>
</body>
</html>
(摘自博客园，原网址http://www.cnblogs.com/reweb/p/3268775.html)
jquery.nicescroll.min.js滚动条使用方法,Nicescroll是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。
页面使用：
$("html").niceScroll({
cursorcolor:"#E62020",
cursoropacitymax:1,
touchbehavior:false,
cursorwidth:"10px",
cursorborder:"0",
cursorborderradius:"5px"
})
nicescroll详细参数配置：
cursorcolor - 设置滚动条颜色，默认值是“＃000000”
cursoropacitymin - 滚动条透明度最小值
cursoropacitymax - 滚动条透明度最大值
cursorwidth - 滚动条的宽度像素，默认为5（你可以写“5PX”）
cursorborder - CSS定义边框，默认为“1px solid #FFF”
cursorborderradius - 滚动条的边框圆角
ZIndex的 - 改变滚动条的DIV的z-index值，默认值是9999
scrollspeed - 滚动速度，默认值是60
mousescrollstep - 滚动鼠标滚轮的速度，默认值是40（像素）
touchbehavior - 让滚动条能拖动滚动触摸设备默认为false
hwacceleration - 使用硬件加速滚动支持时，默认为true
boxzoom - 使变焦框的内容，默认为false
dblclickzoom - （仅当boxzoom = TRUE）变焦启动时，双点击框，默认为true
gesturezoom - boxzoom = true并使用触摸设备）变焦（仅当激活时，间距/盒，默认为true
grabcursorenabled“抢”图标，显示div的touchbehavior = true时，默认值是true
autohidemode，如何隐藏滚动条的作品，真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏
的背景下，改变铁路背景的CSS，默认值为“”
iframeautoresize中，AUTORESIZE iframe上的load事件（默认：true）
cursorminheight，设置最低滚动条高度（默认值：20）
preservenativescrolling，您可以用鼠标滚动本地滚动的区域，鼓泡鼠标滚轮事件（默认：true）
railoffset，您可以添加抵消顶部/左轨位置（默认：false）
bouncescroll，使滚动反弹结束时的内容移动（仅硬件ACCELL）（默认：FALSE）
spacebarenabled，允许使用空格键滚动（默认：true）
railpadding，设置间距（默认：顶：0，右：0，左：0，底部：0}）
disableoutline，Chrome浏览器，禁用纲要（橙色hightlight）时，选择一个div nicescroll（默认：true）
