拒我所知直接的从滚动条上无法获得onmouseup事件。
可以通过别的办法来模拟。
主要还是看你的实际需求。提供两种思路。
模拟onmouseup<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var zxcTO;
function Scroll(){
clearTimeout(zxcTO);
zxcTO = setTimeout(function(){
alert('STOP');
}, 1000);
}
window.onscroll = Scroll;
//-->
</script>
</head>
<body>
<div style="height:2000px;">
</div>
</body>
</html>
可以通过别的办法来模拟。
主要还是看你的实际需求。提供两种思路。
模拟onmouseup<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var zxcTO;
function Scroll(){
clearTimeout(zxcTO);
zxcTO = setTimeout(function(){
alert('STOP');
}, 1000);
}
window.onscroll = Scroll;
//-->
</script>
</head>
<body>
<div style="height:2000px;">
</div>
</body>
</html>
<html>
<head>
<title>Div Scroll Bar </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Xiaosa">
<script language="JavaScript">
<!--
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.onmousemove = 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
window.onresize = function(){
box.style.left = "0px";
box.style.right = "0px";
}
//-->
</script>
<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;
}
</style>
</head>
<body onload=" xs_scroll();">
<div id="box">
<div id="xscroll">
</div>
<div id="slider" style="margin-top:0px;">
</div>
<div id="nContent">
<span 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">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>
<html>
<head>
<title>Div Scroll Bar </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Xiaosa">
<script language="JavaScript">
<!--
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.onmousemove = 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
window.onresize = function(){
box.style.left = "0px";
box.style.right = "0px";
}
//-->
</script>
<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;
}
</style>
</head>
<body onload=" xs_scroll();">
<div id="box">
<div id="xscroll">
</div>
<div id="slider" style="margin-top:0px;">
</div>
<div id="nContent">
<span 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">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>