Is it possible to write a JavaScript to make an action when a DIV Layer's scroll bar is manually scrolled up or scrolled down?
If so please give me a hint to implement a simple such as alert box saying you scrolled up and you scrolled down.
Is it possible to write a JavaScript to make an action when a DIV Layer's scroll bar is manually scrolled up or scrolled down?
If so please give me a hint to implement a simple such as alert box saying you scrolled up and you scrolled down.
Share Improve this question edited Feb 23, 2017 at 12:08 Pooja Kedar 4372 gold badges10 silver badges23 bronze badges asked Dec 9, 2011 at 13:11 Mad coder.Mad coder. 2,1759 gold badges38 silver badges53 bronze badges 1- This should help you: adomas/javascript-mouse-wheel – Felix Kling Commented Dec 9, 2011 at 13:20
2 Answers
Reset to default 8You can simple use onscroll event of java-script.
OnScroll Event Reference : http://www.w3schools./jquery/event_scroll.asp
Here is example,
<head>
<script type="text/javascript">
function OnScrollDiv (div) {
var info = document.getElementById ("info");
info.innerHTML = "Horizontal: " + div.scrollLeft
+ "px<br/>Vertical: " + div.scrollTop + "px";
}
</script>
</head>
<body>
<div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
</div>
<br /><br />
Current scroll amounts:
<div id="info"></div>
</body>
Working copy here : http://jsbin./iledat/2/edit
Try jquery scroll event.
$('div').scroll(function(){alert('scrolled!')})