I’m trying (and failing) to use “onScroll” on a div. All others commands are working properly. I already tried use only the onScroll and gave me nothing too. Why it isn’t working?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
<div onClick="printSC()" onPointerMove="printPM()" onWheel="printWR()" onScroll="printSR()" style="height: 5000px">
</div>
</body>
<script>
function printSC() {
console.log("click");
}
function printPM() {
console.log("moved");
}
function printWR() {
console.log("roll");
}
function printSR() {
console.log("scroll");
}
</script>
</html>I added a second code to show the “onClick” working properly on “body”, but I neet it in a “div”.
Code 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
</head>
<body onScroll="printSR()">
<div style="height: 5000px" ></div>
<script>
function printSR() {
console.log("scroll");
}
</script>
</body>
</html>Advertisement
Answer
If the <div> height is not 100%, you can use the wheel event instead of the scroll event. Currently, the onScroll event is not fired because the height style of the <div> element is not set. The height style is not applied when the <div> element’s display property is inline. There are two ways to solve this problem.
Method-1
Similar to the scroll event, the wheel event can be used if the height of the <div> element does not exceed 100%:
function printSR() {
console.log("scroll");
}
let onwheelContainer = document.getElementById('onwheelContainer');
onwheelContainer.addEventListener('wheel', printSR);#onwheelContainer {
display: block;
height: 50px;
border: 1px solid red;
}<div id="onwheelContainer"></div>
Method-2
Applying a height style after applying the block style to the <div> element’s display property:
.container {
display: block;
height: 5000px;
}
Method-3
Applying the height style to the <div> element using !important:
.container {
height: 5000px !important;
}
Additionally, the <script></script> element must be written before the closing </body> tag. In the following application, the class style .container has been applied to the <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style>
/* [METHOD-1] The class style applied to the <div> element. */
.container{
display: block;
height: 5000px;
border: 1px solid blue;
}
/* [METHOD-2] Class style that can be applied to the <div> element. */
.container2{
height: 5000px !important;
}
#onwheelContainer {
display: block;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- The class style ".container" has been applied to the <div> element. -->
<div class="container" onClick="printSC()" onPointerMove="printPM()" onWheel="printWR()" onScroll="printSR()"></div>
<div id="onwheelContainer"></div>
<!-- The <script></script> element is positioned before the closing tag </body>. -->
<script>
function printSC() {
console.log("click");
}
function printPM() {
console.log("moved");
}
function printWR() {
console.log("roll");
}
function printSR() {
console.log("scroll");
}
/* Similar to the scroll event, the wheel event can be used if the height of the <div> element does not exceed 100%. */
let onwheelContainer = document.getElementById('onwheelContainer');
onwheelContainer.addEventListener('wheel', printSR);
</script>
</body>
</html>