JavaScript event on scroll up or scroll down

Question

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.

This should help you: http://www.adomas.org/javascript-mouse-wheel/ — Felix Kling, Dec 09 '11 at 13:20

score 8 · Accepted Answer · answered Dec 09 '11 at 13:16

You can simple use onscroll event of java-script.

OnScroll Event Reference : http://www.w3schools.com/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.com/iledat/2/edit

jQuery is not mentioned in the question. – lmat - Reinstate Monica Oct 27 '22 at 20:30 — lmat - Reinstate Monica, Oct 27 '22 at 20:30

score -5 · Answer 2 · answered Dec 09 '11 at 13:13

-5

Try jquery scroll event.

$('div').scroll(function(){alert('scrolled!')})

answered Dec 09 '11 at 13:13

Litek

4,888
1
24
28

This won't tell you if you've gone up or down. – jabclab Dec 09 '11 at 13:14
8

`-1`, jQuery is not tagged in this question. – James Hill Dec 09 '11 at 13:14

JavaScript event on scroll up or scroll down

2 Answers2

Linked