Javascript模擬scroll滾動效果腳本第1/2頁

2019-11-21 01:37:54

字體：大中小

來源：轉載

供稿：網友

<!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   id="iwvjtn8m0"   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   class="iwvjtn8m0"   id="category_scroll">     <div   class="iwvjtn8m0"   id="scrollup">上</div>             <div   class="iwvjtn8m0"   id="scroll_hand">滾動滾動滾動</div>             <div   class="iwvjtn8m0"   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>

[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版主給出的解決方法

12 下一頁閱讀全文

上一篇：javascript各種復制代碼收集

下一篇：js點擊出現場層層外點擊層消失的代碼