本脚本用JavaScript实现的在DIV上加滚动条的效果，对于内容太多无法全部显示的div，可以采用本脚本
查看演示页面 View Demo 查看全部代码 View Code
下载
点击这里下载源代码及相关图片
在网页<head>区添加以下代码
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
p{
margin-top:0px;
}
#dhtmlgoodies_scrolldiv{
/* The total width of the scrolling div including scrollbar */
width:530px;
height:500px; /* The height of the scrolling div */
}
#scrolldiv_parentContainer{
width:500px; /* Width of the scrolling text */
height:100%;
overflow:hidden;
border:1px solid #BC8FBD;
float:left;
position:relative;
}
/*
CSS for the scrolling content
*/
#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;
}
/*
The scrollbar slider
*/
#scrolldiv_slider{
width:15px;
margin-left:2px;
height:500px;
float:left;
}
/*
The scrollbar (The bar between the up and down arrow )
*/
#scrolldiv_scrollbar{
width:15px;
height:460px; /* Total height - 40 pixels */
border:1px solid #BC8FBD;
position:relative;
}
/*
The scrollbar handle
*/
#scrolldiv_theScroll{
margin:1px;
width:13px;
height:13px;
background-color:#BC8FBD;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
/*
Scroll buttons(The up and down arrows)
*/
#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">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, September 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var contentHeight = 0; // The total height of the content
var visibleContentHeight = 0;
var scrollActive = false;
var scrollHandleObj = false; // reference to the scroll handle
var scrollHandleHeight = false;
var scrollbarTop = false;
var eventYPos = false;
var scrollbuttonActive = false;
var scrollbuttonDirection = false;
var scrollbuttonSpeed = 2; // How fast the content scrolls when you click the scroll buttons(Up and down arrows)
var scrollTimer = 10; // Also how fast the content scrolls. By decreasing this value, the content will move faster
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'
}
/*
Click on the slider
Move the content to the this point
*/
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;
}
/*
Change from the default color
*/
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;
}
/*
Setting total width of scrolling div
*/
function scrolldiv_setWidth(newWidth)
{
document.getElementById('dhtmlgoodies_scrolldiv').style.width = newWidth + 'px';
document.getElementById('scrolldiv_parentContainer').style.width = newWidth-30 + 'px';
}
/*
Setting total height of scrolling div
*/
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';
}
/*
Setting new background color to the slider
*/
function setSliderBgColor(rgbColor)
{
document.getElementById('scrolldiv_scrollbar').style.backgroundColor = rgbColor;
document.getElementById('scrolldiv_scrollUp').style.backgroundColor = rgbColor;
document.getElementById('scrolldiv_scrollDown').style.backgroundColor = rgbColor;
}
/*
Setting new content background color
*/
function setContentBgColor(rgbColor)
{
document.getElementById('scrolldiv_parentContainer').style.backgroundColor = rgbColor;
}
/*
Setting scroll button speed
*/
function setScrollButtonSpeed(newScrollButtonSpeed)
{
scrollbuttonSpeed = newScrollButtonSpeed;
}
/*
Setting interval of the scroll
*/
function setScrollTimer(newInterval)
{
scrollTimer = newInterval;
}
</script>
在网页<body>区添加以下代码
<div id="dhtmlgoodies_scrolldiv">
<div id="scrolldiv_parentContainer">
<div id="scrolldiv_content">
<!-- PUT YOUR HTML CONTENT IN HERE -->
Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>
<!-- END OF HTML CONTENT -->
</div>
</div>
<div id="scrolldiv_slider">
<div id="scrolldiv_scrollUp"><img src="images/arrow_up.gif"></div>
<div id="scrolldiv_scrollbar">
<div id="scrolldiv_theScroll"><span></span></div>
</div>
<div id="scrolldiv_scrollDown"><img src="images/arrow_down.gif"></div>
</div>
</div>
<script type="text/javascript">
scrolldiv_setColor('#317082'); // Setting border color of the scrolling content
setSliderBgColor('#E2EBED'); // Setting color of the slider div
setContentBgColor('#FFFFFF'); // Setting color of the scrolling content
setScrollButtonSpeed(1); // Setting speed of scrolling when someone clicks on the arrow or the slider
setScrollTimer(5); // speed of 1 and timer of 5 is the same as speed of 2 and timer on 10 - what's the difference? 1 and 5 will make the scroll move a little smoother.
scrolldiv_setWidth(450); // Setting total width of scrolling div
scrolldiv_setHeight(400); // Setting total height of scrolling div
scrolldiv_initScroll(); // Initialize javascript functions
</script>
保存下面两个图片到"images"文件夹下
脚本调用方法
把你的内容添加到 <!-- PUT YOUR HTML CONTENT IN HERE --> 下方
Javascript 配置
实用下面的JavaScript函数配置脚本程序
scrolldiv_setColor(rgbColor) - 制定边框颜色
setSliderBgColor(rgbColor) - 设置滚动条的背景颜色
setContentBgColor(rgbColor) - 指定滚动内容的背景颜色
setScrollButtonSpeed(newSpeed) - 设置滚动的速度(Default = 1)
setScrollTimer(newInterval) - 值越小滚动越快(Default = 10)
scrolldiv_setWidth(newWidth) - 设定div宽度
scrolldiv_setHeight(newHeight) - 设定div高度
scrolldiv_initScroll() -初始话滚动div
