Javascript模拟scroll滚动效果脚本- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript模拟scroll滚动效果脚本

技术文章搜索

关键字

Javascript模拟scroll滚动效果脚本

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 196 ::

收藏到网摘: n/a

js点击出现场层层外点击层消失的代码 javascript各种复制代码收集

项目需要写了一段模拟Scroll滚动代码，分享的同时，我有些疑问，希望大家能帮忙解决，代码如下

点击运行可以看到效果:

<!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">上
<BR>1、键盘事件应加给window统一调配，根据category_hand激发状态判别处理。 <BR>2、放进function里，等页面加载完了再执行。<BR>1、“键盘事件应加给window统一调配，根据category_hand激发状态判别处理”就是实现你这句话的策略：<BR>“当点中滚动条后，触发键盘的上下键，来控制上下滚动”<BR>category_hand被click时，将某个变量设为1,表示它被激活了。当网页内再发生鼠标按键事件时，解除激活。 <BR>某函数响应window对象的键盘事件，如果键盘事件发生时category_hand处于激活状态则执行相关代码。 <br>2、获取页面元素对象，现在大家一般都用$()函数： <BR><div class="codetitle"><span style="CURSOR: pointer" onclick="doCopy(code68389)"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code68389"><BR>function $(id) { <BR>return document.getElementById(id); <BR>}<BR></div> <div style="text-align:left; margin-top:0px; clear:both;"> </div> <div id="tpage"> <span style="float:left;width:45%" class="text-truncate"> <img align="absmiddle" src="https://static.ruanchen.com/img/pre_art.gif" /> <a href="/tech/view/doc/10965/p/34/" title="js点击出现场层层外点击层消失的代码">js点击出现场层层外点击层消失的代码</a></span> <span style="float:right;width:45%;text-align:right" class="text-truncate"> <a href="/tech/view/doc/10967/p/34/" title="javascript各种复制代码收集">javascript各种复制代码收集</a> <img align="absmiddle" src="https://static.ruanchen.com/img/next_art.gif"/></span> </div> </div> <div style="clear:both;"> <script language="javascript"> var infoid = '10966'; var classid = 'tech'; </script> <script language="JavaScript" src="https://static.ruanchen.com/js/mood.js"></script> </div> <div id="cmt"> <h3> <img src="https://static.ruanchen.com/img/cmt.gif" align="absmiddle" /> 评论 (0) <small class="pagenav-listbar"> <a style="padding:5px;" href="javascript:tech_cmt('10966')">All</a> </small> </h3> <div id="cmt-list"></div> <form method="post" action="#cmt" onsubmit="alert('您还没有登陆，登陆后才能进行此操作。');return false;"> <textarea id="content" name="content" style="width:100%; height:100px;">

登陆还没注册？