<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>带滚动条的Div</title> <style type="text/css"> body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; } p{ margin-top:0px; } #dhtmlgoodies_scrolldiv{ width:530px; height:500px; } #scrolldiv_parentContainer{ width:500px; height:100%; overflow:hidden; border:1px solid #BC8FBD; float:left; position:relative; } #scrolldiv_content{ padding: 5px; position:relative; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size: 0.9em; line-height:130%; color: #333; } #scrolldiv_slider{ width:15px; margin-left:2px; height:500px; float:left; } #scrolldiv_scrollbar{ width:15px; height:460px; border:1px solid #BC8FBD; position:relative; } #scrolldiv_theScroll{ margin:1px; width:13px; height:13px; background-color:#BC8FBD; position:absolute; top:0px; left:0px; cursor:pointer; } #scrolldiv_scrollUp,#scrolldiv_scrollDown{ width:15px; height:16px; border:1px solid #BC8FBD; color: #BC8FBD; text-align:center; font-size:16px; line-height:16px; cursor:pointer; } #scrolldiv_scrollUp{ margin-bottom:2px; } #scrolldiv_scrollDown{ margin-top:2px; } #scrolldiv_scrollDown span,#scrolldiv_scrollUp span{ font-family: Symbol; } </style> <script type="text/javascript"> var contentHeight = 0; var visibleContentHeight = 0; var scrollActive = false; var scrollHandleObj = false; var scrollHandleHeight = false; var scrollbarTop = false; var eventYPos = false; var scrollbuttonActive = false; var scrollbuttonDirection = false; var scrollbuttonSpeed = 2; var scrollTimer = 10; var scrollMoveToActive = false; var scrollMoveToYPosition = false; function scrollDiv_startScroll(e) { if(document.all)e = event; scrollbarTop = document.getElementById('scrolldiv_theScroll').offsetTop; eventYPos = e.clientY; scrollActive = true; } function scrollDiv_stopScroll() { scrollActive = false; scrollbuttonActive = false; scrollMoveToActive = false; } function scrollDiv_scroll(e) { if(!scrollActive)return; if(document.all)e = event; if(e.button!=1 && document.all)return; var topPos = scrollbarTop + e.clientY - eventYPos; if(topPos<0)topPos=0; if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1)topPos = visibleContentHeight-(scrollHandleHeight+4); document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px'; document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' } function scrolldiv_scrollMoveToInit(e) { if(document.all)e = event; scrollMoveToActive = true; scrollMoveToYPosition = e.clientY - document.getElementById('scrolldiv_scrollbar').offsetTop; if(document.getElementById('scrolldiv_theScroll').offsetTop/1 > scrollMoveToYPosition) scrollbuttonDirection = scrollbuttonSpeed*-2; else scrollbuttonDirection = scrollbuttonSpeed*2; scrolldiv_scrollMoveTo(); } function scrolldiv_scrollMoveTo() { if(!scrollMoveToActive || scrollActive)return; var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px',''); topPos = topPos/1 + scrollbuttonDirection; if(topPos<0){ topPos=0; scrollMoveToActive=false; } if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){ topPos = visibleContentHeight-(scrollHandleHeight+4); scrollMoveToActive=false; } if(scrollbuttonDirection<0 && topPos<scrollMoveToYPosition-scrollHandleHeight/2)return; if(scrollbuttonDirection>0 && topPos>scrollMoveToYPosition-scrollHandleHeight/2)return; document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px'; document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' setTimeout('scrolldiv_scrollMoveTo()',scrollTimer); } function cancelEvent() { return false; } function scrolldiv_scrollButton() { if(this.id=='scrolldiv_scrollDown')scrollbuttonDirection = scrollbuttonSpeed; else scrollbuttonDirection = scrollbuttonSpeed*-1; scrollbuttonActive=true; scrolldiv_scrollButtonScroll(); } function scrolldiv_scrollButtonScroll() { if(!scrollbuttonActive)return; var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px',''); topPos = topPos/1 + scrollbuttonDirection; if(topPos<0){ topPos=0; scrollbuttonActive=false; } if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){ topPos = visibleContentHeight-(scrollHandleHeight+4); scrollbuttonActive=false; } document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px'; document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' setTimeout('scrolldiv_scrollButtonScroll()',scrollTimer); } function scrolldiv_scrollButtonStop() { scrollbuttonActive = false; } function scrolldiv_initScroll() { visibleContentHeight = document.getElementById('scrolldiv_scrollbar').offsetHeight ; contentHeight = document.getElementById('scrolldiv_content').offsetHeight - visibleContentHeight; scrollHandleObj = document.getElementById('scrolldiv_theScroll'); scrollHandleHeight = scrollHandleObj.offsetHeight; scrollbarTop = document.getElementById('scrolldiv_scrollbar').offsetTop; document.getElementById('scrolldiv_theScroll').onmousedown = scrollDiv_startScroll; document.body.onmousemove = scrollDiv_scroll; document.getElementById('scrolldiv_scrollbar').onselectstart = cancelEvent; document.getElementById('scrolldiv_theScroll').onmouseup = scrollDiv_stopScroll; if(document.all)document.body.onmouseup = scrollDiv_stopScroll; else document.documentElement.onmouseup = scrollDiv_stopScroll; document.getElementById('scrolldiv_scrollDown').onmousedown = scrolldiv_scrollButton; document.getElementById('scrolldiv_scrollUp').onmousedown = scrolldiv_scrollButton; document.getElementById('scrolldiv_scrollDown').onmouseup = scrolldiv_scrollButtonStop; document.getElementById('scrolldiv_scrollUp').onmouseup = scrolldiv_scrollButtonStop; document.getElementById('scrolldiv_scrollUp').onselectstart = cancelEvent; document.getElementById('scrolldiv_scrollDown').onselectstart = cancelEvent; document.getElementById('scrolldiv_scrollbar').onmousedown = scrolldiv_scrollMoveToInit; } function scrolldiv_setColor(rgbColor) { document.getElementById('scrolldiv_scrollbar').style.borderColor = rgbColor; document.getElementById('scrolldiv_theScroll').style.backgroundColor = rgbColor; document.getElementById('scrolldiv_scrollUp').style.borderColor = rgbColor; document.getElementById('scrolldiv_scrollDown').style.borderColor = rgbColor; document.getElementById('scrolldiv_scrollUp').style.color = rgbColor; document.getElementById('scrolldiv_scrollDown').style.color = rgbColor; document.getElementById('scrolldiv_parentContainer').style.borderColor = rgbColor; } function scrolldiv_setWidth(newWidth) { document.getElementById('dhtmlgoodies_scrolldiv').style.width = newWidth + 'px'; document.getElementById('scrolldiv_parentContainer').style.width = newWidth-30 + 'px'; } function scrolldiv_setHeight(newHeight) { document.getElementById('dhtmlgoodies_scrolldiv').style.height = newHeight + 'px'; document.getElementById('scrolldiv_parentContainer').style.height = newHeight + 'px'; document.getElementById('scrolldiv_slider').style.height = newHeight + 'px'; document.getElementById('scrolldiv_scrollbar').style.height = newHeight-40 + 'px'; } function setSliderBgColor(rgbColor) { document.getElementById('scrolldiv_scrollbar').style.backgroundColor = rgbColor; document.getElementById('scrolldiv_scrollUp').style.backgroundColor = rgbColor; document.getElementById('scrolldiv_scrollDown').style.backgroundColor = rgbColor; } function setContentBgColor(rgbColor) { document.getElementById('scrolldiv_parentContainer').style.backgroundColor = rgbColor; } function setScrollButtonSpeed(newScrollButtonSpeed) { scrollbuttonSpeed = newScrollButtonSpeed; } function setScrollTimer(newInterval) { scrollTimer = newInterval; } </script> </head> <body> <div id="dhtmlgoodies_scrolldiv"> <div id="scrolldiv_parentContainer"> <div id="scrolldiv_content">这是一个DIV层,加入了一个滚动条功能,当超出范围的时候便会自动出现,你可以拖动滚动条看看效果哦。<br> </div> </div> <div id="scrolldiv_slider"> <div id="scrolldiv_scrollUp"><img src="http://www.codefans.net/jscss/demoimg/200905/arrow_up.gif"></div> <div id="scrolldiv_scrollbar"> <div id="scrolldiv_theScroll"><span></span></div> </div> <div id="scrolldiv_scrollDown"><img src="http://www.codefans.net/jscss/demoimg/200905/arrow_down.gif"></div> </div> </div> <script type="text/javascript"> scrolldiv_setColor('#317082'); setSliderBgColor('#E2EBED'); setContentBgColor('#FFFFFF'); setScrollButtonSpeed(1); setScrollTimer(5); scrolldiv_setWidth(450); scrolldiv_setHeight(400); scrolldiv_initScroll(); </script> </body> </html>
相关推荐
div滚动条 带滚动条的div div滚动条样式div滚动条 带滚动条的div div滚动条样式
div随滚动条上下滚动,div随滚动条上下滚动div随滚动条上下滚动div随滚动条上下滚动
网页局部div随滚动条置顶滚动 效果很好,跟普通的滚动不太一样,没有延迟。
jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
div加滚动条在前端的网页布局中为了达到类似textarea的效果采取的一种方式,下面提供了几种设置方法,需要注意的是直接为div指定overflow属性为auto即可,但是必须指定div的高度
优秀的的div滚动条优化代码 优化之后不在影响滚动功能的情况下使div的滚动条变为半透明的...
DIV滚动悬浮层,页面滚动条滚动,悬浮层保持位置不变!
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
div加滚动条,有多种样式,非常有用!希望大家喜欢!
div滚动条样式一览-div+css设计网,div滚动条,多个div滚动条样式
有时候我们需要为div加滚动条,那么就可以参考下面的代码
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
这款滚动条还不错,而且修改容易!即使对DIV+CSS初学者都能修改使用!
为div添加滚动条 html 欢迎下载
div或其他html块内容跟随滚动条移动,滚动移动时,内容跟着移动,并保持最右边
div 的滚动条问题 div自动添加滚动条,防止div移动位置
div随着滚动条滚动,但是到了顶部,便不随着滚动了
在页面中的div做滚动条,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,使得div在固定的宽度和高度内可以显示更多的内容。
拖动div 内部有滚动条