Javascript模拟scroll滚动效果脚本第1/2页

Insert title here

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_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.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(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) 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);
}

.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;}

• 1something
• 2something
• 3something
• 4something
• 5something
• 6something
• 7something
• 8something
• 9something
• 10something
• 11something
• 12something
• 13something
• 14something
• 15something
• 16something
• 17something
• 18something
• 19something
• 20something
• 21something
• 22something
• 23something
• 24something
• 25something
• 26something
• 27something
• 28something
• 29something
• 30something

上

滚动滚动滚动

下

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");

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

现在有个问题就是当点中滚动条后，触发键盘的上下键，来控制上下滚动。然而，一般情况下，键盘事件似乎只针对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/2页 12下一页阅读全文