<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > <ptml> &L t;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.addeventli Stener (Stype,fndo,false)} if (otarget.attachevent) {otarget.attachevent ("on" +stype,fndo)} El se{otarget["on" +stype] = Fndo; } Oeventutil.removeeventhandler = function (Otarget,stype,fndo) {if (Otarget.removeeventlistener) {Otarge T.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)-ten + "px"; if (parseint (scroll_hand.style.top) >= parseint (Scroll_hand_bottom)) {scroll_hand.style.top = parseint (scro Ll_hand_bottom) + "px"; } if (parseint (scroll_hand.style.top) <=parseint (scroll_hand_top)) {scroll_hand.style.top = Parsein T (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) + + "px"; if (parseint (scroll_hand.style.top) > parseint (scroll_hand_bottom)) {scroll_hand.style.top = parseint (Scrol L_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 (Scrol L_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); The function Displayscrollbar () {if (Category_list.scro)Llheight > 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> </pead> <body> <div class= "category_list" > <ul id= "category_list" > <li& gt;1something</li> <li>2something</li> <li>3something</li> <li>4somethi ng</li> <li>5something</li> <li>6something</li> <LI>7SOMETHING</LI&G T <li>8something</li> <li>9something</li> <li>10something</li> <li> 11something</li> <li>12something</li> <li>13something</li> <li>14someth Ing</li> <li>15something</li> <li>16something</li> <li>17something</li> <LI>18SOMETHING&L t;/li> <li>19something</li> <li>20something</li> <li>21something</li> ; <li>22something</li> <li>23something</li> <li>24something</li> <LI&G t;25something</li> <li>26something</li> <li>27something</li> <li>28some thing</li> <li>29something</li> <li>30something</li> </ul> <div id= "Cat Egory_scroll "> <div id=" Scrollup "> on </div> <div id=" Scroll_hand "> Rolling rolling </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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Now there is a problem is that when the scroll bar in the point, trigger the keyboard up and down keys to control scrolling up and down. However, in general, keyboard events seem to work only for form form objects and Winsow form objects (except IE), so how do you write event handlers when you create them?
Oeventutil.addeventhandler (Category_hand, "KeyUp", test), seems to be no, after all, Category_hand represents a div
The test () function is as follows:
function Test () {
Alert ("RUN");
var oevent = oeventutil.getevent ();
if (oevent.keycode==38) {
Alert ("Up");
Clicknarrowup ();
}
if (oevent.keycode==40) {
Clicknarrowdown ();
Alert ("Down");
}
}
Please help the master to answer.
Question two: In this code, when defining variables I am inserting code in the middle of HTML to get objects, If this code is inserted into the Window.onload function, then it is very likely that these objects have not been loaded at this time and cannot be read to produce program errors, so the problem is if I want to completely:
<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>
The introduction to Blueidea Moderator gives the solution
Current 1/2 page
12 Next read the full text
