Explanation of Basic Examples of javascript Roller Event (37)
- 2021-07-21 06:42:28
- OfStack
In this paper, we share the specific code of js scroll event for your reference, and the specific contents are as follows
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
// Cause div You can follow the mouse wheel to change the height
// The roller rolls down, div Become taller The roller rolls upwards div Shorten
// Get box1
var box1 = document.getElementById("box1");
/*
* onmousewheel
* - Mouse wheel scrolling event, but this event is not supported by Firefox browser
* - In Firefox, you need to use DOMMouseScroll This event can only pass through addEventListener() To bind
*/
// For box1 Binding 1 Events of mouse wheel scrolling
box1.onmousewheel = function(event){
event = event || window.event;
// Judge the rolling direction of the roller
/*
* wheelDelta
* - An attribute in an event object that can be used to determine the direction in which the mouse wheel scrolls
* - Roll down -120 Roll up +120
* - The value of this attribute is not important, but the symbol of the value is important, and the scrolling direction needs to be judged by the symbol
* - However, this property is not supported by Firefox browser
*/
//alert(event.wheelDelta);
/*
* Passing through Firefox detail To judge the direction
* - Roll up -3 Roll down +3
*/
//alert(event.detail);
if(event.wheelDelta < 0 || event.detail > 0){
// Roll down
// Increase box1 The height of
box1.style.height = box1.offsetHeight + 10 + "px";
}else{
// Roll up
// Decrease box1 The height of
box1.style.height = box1.offsetHeight - 10 + "px";
}
/*
* Use addEventListener() Bound event, cannot pass the return false To cancel the default behavior
* The event object needs to be called preventDefault() Method to cancel the default behavior
* But in IE8 There is no method in
*/
event.preventDefault && event.preventDefault();
// When there are scroll bars in the page, the whole page moves down due to the default behavior of scroll wheel scrolling
// Cancel default behavior
return false;
};
bind(box1 , "DOMMouseScroll" , box1.onmousewheel);
};
function bind(obj , eventStr , callback){
if(obj.addEventListener){
// If it is a normal browser
obj.addEventListener(eventStr , callback , false);
}else{
//IE8
obj.attachEvent("on"+eventStr , function(){
callback.call(obj);
});
}
}
</script>
</head>
<body style="height: 3000px;">
<div id="box1"></div>
</body>
</html>