Home/ Questions/Q 7884259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T04:45:04+00:00

Here’s the simplified html: <!DOCTYPE html> <html> <head> <script type=text/javascript> function handle() { console.log(fired);

  • 0

Here’s the simplified html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function handle() { console.log("fired"); };
        </script>
    </head>
    <body>
        <div style="width:200px; height:100px; overflow-y: scroll; border: 1px solid gray;" onscroll="handle()">
            <div style="width:150px; height:400px;">&nbsp;</div>
        </div>
    </body>
</html>

The problem is, when div is not scrolled at all (initial position) the small button with triangle symbol on top of scrollbar does not fire an event. Maybe it’s logical, but I search a way to work around this behaviour, because it’s the only way for now to work around dojo framework tree widget with enabled drag-n-drop. Yep, I know, workaround for workaround.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, it’s not pretty, but this should do the trick:

    <!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function handle() { console.log("fired"); };
        </script>
    </head>
    <body>
        <div id="div" style="width:200px; height:100px; overflow-y: scroll; border: 1px solid gray;">
            <div style="width:150px; height:400px;">&nbsp;</div>
        </div>
        <script>

            //Get the element
            var div = document.getElementById("div");

            var ignore = true;

            //Set the scroll to 1 (this will allow it to scroll up)
            div.scrollTop = 1;


            div.addEventListener("scroll", function(){

                //Ignore generating output if the code set the scroll position
                if(ignore) {
                    ignore = !ignore;
                    return;
                }



                //CODE GOES HERE
                handle();


                //If the scroll is at the top, go down one so that the user
                //is still allowed to scroll.
                if(div.scrollTop <= 1) {
                    ignore = true;
                    div.scrollTop = 1;
                }

                //If the scroll is at the bottom, go up one so the user can
                //still scroll down
                else if(div.scrollTop >= div.scrollHeight-div.clientHeight - 1) {
                    ignore = true;
                    div.scrollTop = div.scrollHeight-div.clientHeight - 1;
                }

            }, true);
        </script>
    </body>
</html>

    I removed the inline function call and replaced it with an eventListener. Basically, it makes sure the user never scrolls completely to the top or bottom, ensuring that there will always be a scroll event.

    • 0