给div加滚动条 div显示滚动条设置代码
两种方法： 
一、 
代码如下:
<div rtcscls-1-s_r_1 rtcscls-1-s_p_2 rtcscls-1-r_6 rtcscls-1-p_1">
记住宽和高一定要设置噢，否则不成的 
 
不过在不超出时，会有下面的滚动条，所以不是最好的选择 

二、 
代码如下:
<div rtcscls-1-s_r_1 rtcscls-1-s_p_2 rtcscls-1-p_1">
记住宽和高一定要设置噢，否则不成的 
这样比较好的是，在宽和高不超出时，只是一条线 
三、说明 
直接为div指定overflow属性为auto即可，但是必须指定div的高度，如下： 
代码如下:
<div > </div> 

如果要出现水平滚动条，则： overflow-x:auto 
同理，垂直滚动条为： overflow-y:auto 
如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative 
或者将下面代码保存为 .htm文件就可以看到如图效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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;
element表格横向滚动条    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 = ElementById('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);
        ElementById('scrolldiv_theScroll').p = topPos + 'px';
        ElementById('scrolldiv_content').p = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px'
    }
    function scrolldiv_scrollMoveToInit(e)
    {       
        if(document.all)e = event;
        scrollMoveToActive = true;
        scrollMoveToYPosition = e.clientY - ElementById('scrolldiv_scrollbar').offsetTop;
        ElementById('scrolldiv_theScroll').offsetTop/1 > scrollMoveToYPosition) scrollbuttonDirection = scrollbuttonSpeed*-2; else  scrollbuttonDirection = scrollbuttonSpeed*2;
        scrolldiv_scrollMoveTo();   
    }
   
    function scrolldiv_scrollMoveTo()
    {
        if(!scrollMoveToActive || scrollActive)return;
        var topPos = ElementById('scrolldiv_theScroll').place('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;           
        ElementById('scrolldiv_theScroll').p = topPos + 'px';

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。