代码
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>insert title here</title>
<script type="text/javascript">
var oeventutil = new object();
oeventutil.addeventhandler = function (otarget,stype,fndo){
if(otarget.addeventlistener){
otarget.addeventlistener(stype,fndo,false)
}
if(otarget.attachevent){
otarget.attachevent("on"+stype,fndo)
}
else{
otarget["on"+stype] = fndo;
}
}
oeventutil.removeeventhandler = function (otarget,stype,fndo){
if(otarget.removeeventlistener){
otarget.removeeventlistener(stype,fndo,false)
}
if(otarget.detachevent){
otarget.detachevent("on"+stype,fndo)
}
else{
otarget["on"+stype] = null;
}
}
oeventutil.getevent = function() {
if (window.event) {
return this.formatevent(window.event);
} else {
return oeventutil.getevent.caller.arguments[0];
}
}
oeventutil.formatevent = function (oevent)
{
oevent.pagey = oevent.clienty + document.body.scrolltop;
return oevent;
}
function areascroll(){
var scroll_hand_top = parseint(scrollup.offsetheight);
var scroll_hand_bottom = parseint(category_list.offsetheight) - parseint(scrolldown.offsetheight) - parseint(scroll_hand.offsetheight);
category_list.scrolltop = (parseint(category_list.scrollheight)-parseint(category_list.offsetheight) + parseint(scrollup.offsetheight))*(parseint(scroll_hand.style.top)-parseint(scrollup.offsetheight))/(parseint(scroll_hand_bottom)-parseint(scrollup.offsetheight))-parseint(scrollup.offsetheight);
}
function clicknarrowup(){
var oevent = oeventutil.getevent();
var scroll_hand_top = parseint(scrollup.offsetheight);
var scroll_hand_bottom = parseint(category_list.offsetheight) - parseint(scrolldown.offsetheight) - parseint(scroll_hand.offsetheight);
if(parseint(scroll_hand.offsettop) <= parseint(scroll_hand_bottom) && parseint(scroll_hand.offsettop) >= parseint(scroll_hand_top)){
scroll_hand.style.top = parseint(scroll_hand.offsettop) - 10 +"px";
if(parseint(scroll_hand.style.top) >= parseint(scroll_hand_bottom)){
scroll_hand.style.top = parseint(scroll_hand_bottom)+"px";
}
if(parseint(scroll_hand.style.top)<=parseint(scroll_hand_top)){
scroll_hand.style.top = parseint(scroll_hand_top)+"px";
}
areascroll();
}
}
function clicknarrowdown(){
var oevent = oeventutil.getevent();
var scroll_hand_top = parseint(scrollup.offsetheight);
var scroll_hand_bottom = parseint(category_list.offsetheight) - parseint(scrolldown.offsetheight) - parseint(scroll_hand.offsetheight);
if(parseint(scroll_hand.offsettop) <= parseint(scroll_hand_bottom) && parseint(scroll_hand.offsettop) >= parseint(scroll_hand_top)){
scroll_hand.style.top = parseint(scroll_hand.offsettop) + 10 +"px";
if(parseint(scroll_hand.style.top) > parseint(scroll_hand_bottom)){
scroll_hand.style.top = parseint(scroll_hand_bottom)+"px";
}
if(parseint(scroll_hand.style.top)<parseint(scroll_hand_top)){
scroll_hand.style.top = parseint(scroll_hand_top)+"px";
}
areascroll();
}
}
function mousedown(e){
var oevent = oeventutil.getevent();
y = parseint(oevent.pagey) - parseint(scroll_hand.offsettop);
oeventutil.addeventhandler(scroll_hand, "mousemove", mousemove);
oeventutil.addeventhandler(scroll_hand, "mouseup", mouseup);
oeventutil.addeventhandler(scroll_hand, "mouseout", mouseout);
}
function mousemove(e){
var oevent = oeventutil.getevent();
var scroll_hand_top = parseint(scrollup.offsetheight);
var scroll_hand_bottom = parseint(category_list.offsetheight) - parseint(scrolldown.offsetheight) - parseint(scroll_hand.offsetheight);
if(parseint(scroll_hand.offsettop) <= parseint(scroll_hand_bottom) && parseint(scroll_hand.offsettop) >= parseint(scroll_hand_top)){
scroll_hand.style.top = parseint(oevent.pagey) - y + "px";
if(parseint(scroll_hand.style.top) > parseint(scroll_hand_bottom)){
scroll_hand.style.top = parseint(scroll_hand_bottom)+"px";
}
if(parseint(scroll_hand.style.top)<parseint(scroll_hand_top)){
scroll_hand.style.top = parseint(scroll_hand_top)+"px";
}
areascroll();
}
}
function mouseup(e){
oeventutil.removeeventhandler(scroll_hand,"mousemove",mousemove);
oeventutil.removeeventhandler(scroll_hand,"mouseup",mouseup);
}
function mouseout(e){
oeventutil.removeeventhandler(scroll_hand,"mousemove",mousemove);
oeventutil.removeeventhandler(scroll_hand,"mouseout",mouseout);
}
function displayscrollbar(){
if(category_list.scrollheight > category_list.offsetheight){
category_scroll.style.display="block";
}
else{category_scroll.style.display="none";}
}
window.onload = function () {
//var category_scroll = document.getelementbyid("category_scroll");
//var scroll_hand = document.getelementbyid("scroll_hand");
//var scrollup = document.getelementbyid("scrollup");
//var scrolldown = document.getelementbyid("scrolldown");
//var category_list = document.getelementbyid("category_list");
category_list.scrolltop = 0;
displayscrollbar();
oeventutil.addeventhandler(scroll_hand,"mousedown",mousedown);
oeventutil.addeventhandler(scrollup,"click",clicknarrowup);
oeventutil.addeventhandler(scrolldown,"click",clicknarrowdown);
}
</script>
<style type="text/css">
.category_list{width:200px;border:solid 1px #666666;height:300px;position:relative;}
#category_list{list-style:none;margin:0;padding:0;padding-left:20px;overflow:hidden;height:298px;}
#category_scroll{height:298px;width:15px;border:green solid 1px;position:absolute;right:0;top:0;font-size:12px;cursor:hand;}
#scrollup{height:15px;width:15px;border:green solid 1px;}
#scroll_hand{height:100px;width:15px;border:green solid 1px;position:absolute;}
#scrolldown{height:15px;width:15px;border:green solid 1px;position:absolute;bottom:0;}
</style>
</head>
<body>
<div class="category_list">
<ul id="category_list">
<li>1something</li>
<li>2something</li>
<li>3something</li>
<li>4something</li>
<li>5something</li>
<li>6something</li>
<li>7something</li>
<li>8something</li>
<li>9something</li>
<li>10something</li>
<li>11something</li>
<li>12something</li>
<li>13something</li>
<li>14something</li>
<li>15something</li>
<li>16something</li>
<li>17something</li>
<li>18something</li>
<li>19something</li>
<li>20something</li>
<li>21something</li>
<li>22something</li>
<li>23something</li>
<li>24something</li>
<li>25something</li>
<li>26something</li>
<li>27something</li>
<li>28something</li>
<li>29something</li>
<li>30something</li>
</ul>
<div id="category_scroll">
<div id="scrollup">上</div>
<div id="scroll_hand">滚动滚动滚动</div>
<div id="scrolldown">下</div>
<script type="text/javascript">
var category_scroll = document.getelementbyid("category_scroll");
var scroll_hand = document.getelementbyid("scroll_hand");
var scrollup = document.getelementbyid("scrollup");
var scrolldown = document.getelementbyid("scrolldown");
var category_list = document.getelementbyid("category_list");
</script>
</div>
</div>
</body>
</html>
现在有个问题就是当点中滚动条后，触发键盘的上下键，来控制上下滚动。然而，一般情况下，键盘事件似乎只针对form表单对象和winsow窗体对象起作用（除ie）,那么当创建事件处理函数时该怎们写呢？
oeventutil.addeventhandler(category_hand,"keyup",test)，似乎是不行，毕竟category_hand代表的是一个div
test()函数如下：
function test(){
//alert("run");
var oevent =
oeventutil.getevent();
if(oevent.keycode==38){
alert("up");
clicknarrowup();
}
if(oevent.keycode==40){
clicknarrowdown();
alert("down");
}
}
请高手帮忙解答一下。
疑问二:这段代码中，在定义变量的时候我是在html中间插入的代码，用于获取对象，如果这段代码插入到window.onload函数中时，那么很有可能此时这些对象尚未加载，无法读取到而产生程序错误，那么问题就是，如果我想完全将：
<script type="text/javascript">
var category_scroll =
document.getelementbyid("category_scroll");
var scroll_hand =
document.getelementbyid("scroll_hand");
var scrollup =
document.getelementbyid("scrollup");
var scrolldown =
document.getelementbyid("scrolldown");
var category_list =
document.getelementbyid("category_list");
</script>
引入到<head>之间怎们处理比较好呢？
blueidea版主给出的解决方法
1、键盘事件应加给window统一调配，根据category_hand激发状态判别处理。
2、放进function里，等页面加载完了再执行。
1、“键盘事件应加给window统一调配，根据category_hand激发状态判别处理”就是实现你这句话的策略：
“当点中滚动条后，触发键盘的上下键，来控制上下滚动”
category_hand被click时，将某个变量设为1,表示它被激活了。当网页内再发生鼠标按键事件时，解除激活。
某函数响应window对象的键盘事件，如果键盘事件发生时category_hand处于激活状态则执行相关代码。
2、获取页面元素对象，现在大家一般都用$()函数：
function $(id) {
return
document.getelementbyid(id);
}