div的滚动条效果

alvinqq

浏览: 185404 次
性别:
来自: 深圳

最近访客更多访客>>

abpyu

zgh9412

Torero

hanjiguang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

div嵌套表格实现竖行的滚动

   <DIV style="BORDER-RIGHT: #6495ed 1px solid; BORDER-TOP: #6495ed 3px solid; BORDER-LEFT: #6495ed 1px solid; BORDER-BOTTOM: #6495ed 1px solid; width:400px;margin-left:22px;">
   <DIV id=headerDiv style="OVERFLOW: hidden; WIDTH: 400px">
      <TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#d0e7ef border=0>
        <TBODY>
         <TR style="TEXT-ALIGN: left">
           <Td width=140 height=20><strong>Server/Factions</strong></Td>
           <Td width=135><strong>Price</strong></Td>
           <Td width=60><strong>Status</strong></Td>
           <Td width=65><strong>Buy</strong></Td>
         </TR>
        </TBODY>
       </TABLE>
      </DIV>
      <DIV style="OVERFLOW-y: auto;OVERFLOW-x: hidden; WIDTH: 400px; HEIGHT: 105px" onscroll="document.getElementById('headerDiv').scrollLeft = scrollLeft">
      <TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#f9f9f9 border=0>
        <TBODY>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
<TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
    <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        </TR>
        </TBODY>
        </TABLE>
        </DIV>
        </DIV>

 

 

div横行的滚动条

<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: 200px; 
             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: 500px; TEXT-ALIGN: left; background-repeat: no-repeat;">
             
             你需要的放置的内容
            </div>

 

div华丽的竖行滚动条

<!--*********信息内容开始********-->
   <div style="
     PADDING-LEFT: 36px;
     PADDING-BOTTOM: 0px;
     WIDTH: 526px; HEIGHT: 100px;
     color:#000000;
     margin-top:36px;
     /*---------滚动条样式开始------------*/
        /*OVERFLOW-Y: auto; 垂直滚动条，OVERFLOW-X: auto; 左右滚动条*/
     OVERFLOW: auto;
              SCROLLBAR-FACE-COLOR: #6D4110;  
              SCROLLBAR-HIGHLIGHT-COLOR: #3C140C;
              SCROLLBAR-SHADOW-COLOR: #3C140C;
              SCROLLBAR-3DLIGHT-COLOR:#3C140C; 
              SCROLLBAR-ARROW-COLOR: #919192; 
              SCROLLBAR-TRACK-COLOR: #3C140C;
              SCROLLBAR-DARKSHADOW-COLOR: #3C140C;
     /*---------滚动条样式结束------------*/
     ">
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
   </div>  
 

需要注意的参数是：

SCROLLBAR-FACE-COLOR         /*立体滚动条凸出部分的颜色*/
SCROLLBAR-HIGHLIGHT-COLOR    /*滚动条空白部分的颜色*/
SCROLLBAR-SHADOW-COLOR       /*立体滚动条阴影的颜色*/
SCROLLBAR-ARROW-COLOR        /*上下按钮上三角箭头的颜色*/
SCROLLBAR-BASE-COLOR         /*滚动条的基本颜色*/
SCROLLBAR-DARK-SHADOW-COLOR  /*立体滚动条强阴影的颜色*/
SCROLLBAR-3DLIGHT-COLOR      /*滑动条以及三角箭头左边上边的颜色*/
SCROLLBAR-TRACK-COLOR        /*滑动条凹槽内的颜色*/
SCROLLBAR-DARKSHADOW-COLOR   /*滑动条以及三角箭头右边下边的颜色*/

分享到：