Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Javascript simulates scroll scrolling effect script page 1/2_javascript skills

Javascript simulates scroll scrolling effect script page 1/2_javascript skills

PHP中文网
Release： 2016-05-16 19:00:45
Original
1125 people have browsed it

Code

<!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>
Copy after login

Now there is a problem: when the scroll bar is clicked, the up and down keys of the keyboard are triggered to control the up and down scrolling. However, in general, keyboard events seem to only work for Form form objects and Winsow form objects (except IE), so how should we write when creating event handling functions?
oEventUtil.addEventHandler(category_hand,"keyup",test) seems not to work. 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 me answer this question.

Question 2: In this code, when defining the variable, I inserted the code in the middle of the HTML to obtain the object. If this code is inserted into the window.onload function, then it is very likely that At this time, these objects have not been loaded and cannot be read and a program error will occur. The question is, if I want to completely:
What is the best way to deal with the introduction of
to ?
The solution given by the blueidea moderator

1. Keyboard events should be added to the window for unified deployment and processed according to the category_hand activation status.
2. Put it in the function and wait until the page is loaded before executing it.
1. "Keyboard events should be added to the window for unified deployment, and processed according to the category_hand activation status" is the strategy to realize your sentence:
"When the scroll bar is clicked, trigger the up and down keys of the keyboard to control Scroll up and down”
When category_hand is clicked, a variable is set to 1, indicating that it is activated. When another mouse button event occurs in the web page, it will be deactivated.
A function responds to the keyboard event of the window object. If the category_hand is activated when the keyboard event occurs, the relevant code will be executed.

2. Get the page element object. Now everyone generally uses the $() function: 

function $(id) { 
return 
document.getElementById(id); 
}
Copy after login
Related labels：
javascript scroll
source：php.cn
Previous article：Collection of various javascript copy codes_javascript skills Next article：js catching game_mouse effects
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template