字体: | 推荐给好友 上一篇 | 下一篇

让div中实现滚动条技巧

发布: 2007-11-29 23:55 | 作者: webmaster | 来源: 本站原创 | 查看: 3次

QUOTE:

<html>
<head >
    <title>让div中实现滚动条技巧</title>

    <script language="javascript" type="text/javascript">...  
      var   rs=0;   
      var   ht;   
      function  res(obj)
      ...{   
          rs=obj;   
          event.srcElement.setCapture();   
      }   
        
      function   document.onmouseover()
      ...{               
          document.all.splitbar.style.cursor="w-resize";   
      }   
        
      function document.onmousemove()
      ...{   
            if(rs)
            ...{   
                  document.getElementById("txt").value = document.all.td1.style.pixelWidth;
                  document.all.td1.style.pixelWidth = event.x-document.all.splitbar.style.pixelTop-20;                    
            }   
      }   
        
      function document.onmouseup()
      ...{   
          if(rs)
          ...{   
            event.srcElement.releaseCapture();   
            rs=0;   
          }   
      }
      
    </script>

</head>
<body onload="ht=document.all.tb1.offsetHeight;" onresize="ht=document.all.tb1.offsetHeight;">
        <table id="tb1" width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
            <tr>
                <td id="td1">
                    <input type="text" id="txt" />
                    <br />
                    b<br />
                    c<br />
                    d<br />
                    e<br />
                    v<br />
                    9<br />
                    f<br />
                    a<br />
                    a<br />
                    e<br />
                    d<br />
                    g<br />
                    d<br />
                    a<br />
                    d<br />
                    t<br />
                    s<br />
                    d<br />
                </td>
                <td bgcolor="#999999" id="splitbar" onmousedown="res('splitbar')" style="width: 1px">
                </td>
                <td id="td2">
                    <div style="padding-right: 10px; overflow-y: auto; padding-left: 10px; scrollbar-face-color: #ffffff;
                        font-size: 11pt; padding-bottom: 0px; scrollbar-highlight-color: #ffffff; overflow: auto;
                        width:auto; scrollbar-shadow-color: #919192; color: blue; scrollbar-3dlight-color: #ffffff;
                        line-height: 100%; scrollbar-arrow-color: #919192; padding-top: 0px; scrollbar-track-color: #ffffff;
                        font-family: 宋体; scrollbar-darkshadow-color: #ffffff; letter-spacing: 1pt; height: 111px;
                        text-align: left; background-repeat: no-repeat;">
                        aaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/>
                        aaaaaaaaaaaaaaaaa<br/>
                        aaaaaaaaaaaaaaaaa<br/>
                        aaaaaaaaaaaaaaaaa<br/>
                        aaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaa<br>
                    </div>
                </td>
            </tr>
        </table>
</body>
</html>

TAG: div 实现 技巧 滚动

 

评分:0

我来说两句

seccode