自定义滚动条案例

来源：互联网发布：网络管理(兼职) 编辑：程序博客网时间：2024/06/05 07:28

网页常见的选项卡，为了在选项卡这么小的空间放进比较多的内容，那么可以运用滚动条来控制内容区域的高度，使当前选项卡放下足够的文字。可能我说的有点抽像，下面用一张图表示一下：

这两张图片是我从网上截图的，第一张是hao123网站左侧的选项卡，鼠标经过当前选项卡的时候，选项卡的右边会出现滚动条，这个滚动条可以控制选项卡内容的高度，方便读者阅读；第二章是网易首页左侧的选项卡，原理一样，就是滚动条一直显示的，没有鼠标经过才显示的特效；

那么这些例子都是怎么实现的呢？

以下我举一个当前的选显卡的例子：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           *{
               list-style: none;
           }
           #new{
               width: 300px;
               height: 700px;
               float: left;
               border: 1px solid #000;
               box-sizing: border-box;
               padding: 5px;
               font-size: 20px;
               overflow: hidden;
               position: relative;
           }
           #con{
               width:290px;
               position: absolute;
           }
           #wrap{
               margin: 0 auto;
               width: 25px;
               height: 700px;
               background: #976;
               position: relative;
               float: left;

           }
           #box{
               width: 25px;
               height: 50px;
               background: chartreuse;
               position: absolute;
               top: 0;
               left: 0;
           }
           #con li{
               width:200px;
               height: 80px;
           }
       </style>
       <script type="text/JavaScript">
           window.onload=function(){
               var oBox=document.getElementById('box');
               var oWrap=document.getElementById('wrap');
               var oNew=document.getElementById('new');
               var oCon=document.getElementById('con');
               var aLi=oCon.getElementsByTagName('li');
               for (i=0;i<aLi.length;i++) {
                   if (i%2==0) {
                       aLi[i].style.backgroundColor='#36f';
                   } else{
                       aLi[i].style.backgroundColor='#394';
                   }
               }

               var divY=0;
               oBox.onmousedown=function(ev){
                   var iEvent=ev||event;
                   divY=iEvent.clientY-oBox.offsetTop;
                   document.onmousemove=function(ev){
                       var iEvent=ev||event;
                       var s=(iEvent.clientY-divY)/(oWrap.offsetHeight-oBox.offsetHeight)
                       oCon.style.top=-(oCon.offsetHeight-oNew.offsetHeight)*s+'px';
                       oBox.style.top=iEvent.clientY-divY+'px';
                       if(iEvent.clientY-divY<0){
                           oBox.style.top=0;
                       }
                       if (iEvent.clientY-divY>oWrap.offsetHeight-oBox.offsetHeight) {
                           oBox.style.top=oWrap.offsetHeight-oBox.offsetHeight+'px';
                       }

                   };
                   document.onmouseup=function(){
                       document.onmousedown=null;
                       document.onmousemove=null;
                   };
                   return false;
               };
           };
       </script>
   </head>
   <body>
       <div id="new">
           <ul id="con">
                   <li>1</li>
                   <li>2</li>
                   <li>3</li>
                   <li>4</li>
                   <li>5</li>
                   <li>6</li>
                   <li>7</li>
                   <li>8</li>
                   <li>9</li>
                   <li>10</li>
                   <li>11</li>
                   <li>12</li>
                   <li>13</li>
                   <li>14</li>
                   <li>15</li>
                   <li>16</li>
                   <li>17</li>
                   <li>18</li>
                   <li>19</li>
                   <li>20</li>
                   <li>21</li>
                   <li>22</li>
                   <li>23</li>
                   <li>24</li>
                   <li>25</li>
                   <li>26</li>
                   <li>27</li>
                   <li>28</li>

               </ul>

       </div>
       <div id="wrap">
           <div id="box">

           </div>
       </div>

   </body>
</html>

例子效果图是这样的

0 0