jsp中如何手动添加滚动条 也就是 写个纯JS的滚动条或者更好的方法实现

JavaScript09

jsp中如何手动添加滚动条 也就是 写个纯JS的滚动条或者更好的方法实现,第1张

<script language="javascript">

$(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）