div+css构建的滑动条

转载

foamflower 2023-09-07 13:33:17

文章标签 div css scroll function generator 文章分类 jQuery 前端开发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Div Scroll Bar </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Xiaosa">

<mce:script language="JavaScript"><!--
//----------------------------------------
// Name:        Div Scroll Bar
// Author:      Xiaosa
// Contact:     goldenlove518@msn.com
// CreateDate:  2005-7-11
// LastChange:  2005-7-12
//----------------------------------------

var mouseInit = slideInit = 0;
var slider, xscroll, nContent,box;
var xH,xT,nSH,nOH;

function init(){
    box = document.getElementById("box");
    slider = document.getElementById("slider");
 xscroll = document.getElementById("xscroll");
 nContent = document.getElementById("nContent");
 
 slider.style.left = xscroll.offsetLeft - xscroll.offsetWidth/2-1;
 slider.style.top = xscroll.offsetTop;
 slider.style.visibility = "visible";
 
 xH = xscroll.offsetTop + xscroll.offsetHeight - slider.offsetHeight;
 xT = xscroll.offsetTop;
 nSH = nContent.scrollHeight;
 nOH = nContent.offsetHeight;
    if(nSH <= nContent.clientHeight){
  xscroll.style.visibility = "hidden";
  slider.style.visibility = "hidden";
 }
}

function xs_scroll(){
    // Call Init function
 init();

 slider.onmousedown =function(){
   slider.setCapture();
   mouseInit = event.clientY;
   slideInit = parseInt(slider.style.marginTop);
   slider.οnmοusemοve= setPos;
 }

 slider.onmouseup = document.onmouseup = function(){
   slider.onmousemove = "";
   slider.releaseCapture();
 }
 
 box.ondragstart = box.onselectstart = function(){
   event.returnValue =false;
   return false;
 }
}
    //Set slider Position
function setPos(){
 var m = slideInit + (event.clientY - mouseInit);
 if (m < 0) m = 0;
 if (m > xscroll.clientHeight-slider.offsetHeight) m = xscroll.offsetHeight-slider.offsetHeight;

 slider.style.marginTop = m + "px";
 nContent.scrollTop = (nSH-nOH)*parseInt(m)/(xscroll.clientHeight-slider.clientHeight);
}

    //Reset Box Layout
function window.onresize (){
    box.style.left = "0px";
 box.style.right = "0px";
}
// --></mce:script>
<mce:style><!--
/* ----------------------- Div Scroll Bar --------------------------------- */

  #box {
     background:#fefefe;
     position:relative;
  width:185px;
  height:220px;
  }
  #xscroll {
     position:relative;
  float:right;
  left:auto;
  top:auto;
  height:100%;
  width:1px;
  background:red;
  }
  #slider {
     position:absolute;
  left:0px;
  top:0px;
  z-index:1;
  width:5px;
  height:23px;
     visibility:hidden;
  background:darkred;
  }
  #nContent {
  color:#6A2A04;
     position:relative;
  width:180px;
  height:220px;
  overflow:hidden;
  background:#FF9933;
  font-size:9pt;
  font-family:arial;
  }
  
--></mce:style><style mce_bogus="1">/* ----------------------- Div Scroll Bar --------------------------------- */

  #box {
     background:#fefefe;
     position:relative;
  width:185px;
  height:220px;
  }
  #xscroll {
     position:relative;
  float:right;
  left:auto;
  top:auto;
  height:100%;
  width:1px;
  background:red;
  }
  #slider {
     position:absolute;
  left:0px;
  top:0px;
  z-index:1;
  width:5px;
  height:23px;
     visibility:hidden;
  background:darkred;
  }
  #nContent {
  color:#6A2A04;
     position:relative;
  width:180px;
  height:220px;
  overflow:hidden;
  background:#FF9933;
  font-size:9pt;
  font-family:arial;
  }
  </style>
</head>

<body οnlοad=" xs_scroll();">

       <div id="box">
     <div id="xscroll"></div>
     <div id="slider" style="margin-top:0px;" mce_style="margin-top:0px;"> </div>
     <div id="nContent">
     <span style="font-weight:bold" mce_style="font-weight:bold">
     We produce strategic events for a 
     wide cross-section of industries
     with a particular emphasis on the 
     following :</span><br /><br />
     * Telecommunications & IT <br />
     * Real Estate and Property Management
     * Financial Services<br /> 
     * Construction<br />
     * FMCG<br />
     * Aviation<br />
     * Pharmaceutical & Healthcare<br />
     * Oil & Gas, Power<br />
     * Auto <br />
     * Travel & Tourism<br />
     * Retail <br />
     * Advertising & Marketing<br />
     <br />
     <span style="font-weight:bold" mce_style="font-weight:bold">All the products cover almost every job function of any organization :</span>
     <br /><br />
     * Marketing & Sales <br />
     * Research & Development <br />
     * Finance & Tax <br />
     * Manufacturing & Operations <br />
     * Legal Counsel <br />
     * Customer Services <br />
     * Human Resources <br />
     * Logistic & Supply Chain <br />
     * Public Relations <br />
     * IT <br />
     * Business Development & Strategic Planning
      </div>
    </div>
</body>
</html>