<html>
<head>
<style>
div {`border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;`
}
</style>
</head>
<body>
<p>Experience the magic of scrollbar within a div.</p>
<div id="xyz">In my days of youth, my father shared wisdom with me that continues to echo in my thoughts.</div>
<p>Scrolled <span id="demo">0</span> times.</p>
<script>
document.getElementById("xyz").onscroll = myFnction;
var x = 0;
function myFnction() {
document.getElementById("demo").innerHTML = x += 1;
}
</script>
</body>
</html>
I have also attempted to use the onscroll event within the div tag, but it seems to not be effective. Any suggestions or solutions would be greatly appreciated!