0

簡略化された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>

問題は、divがまったくスクロールされていない場合（初期位置）、スクロールバーの上部にある三角形の記号が付いた小さなボタンがイベントを発生させないことです。論理的かもしれませんが、ドラッグアンドドロップが有効になっているdojoフレームワークツリーウィジェットを回避する唯一の方法であるため、この動作を回避する方法を探しています。うん、私は知っている、回避策の回避策。

4

1 に答える 1

2

まあ、それはきれいではありませんが、これはトリックを行うはずです:

<!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>

インライン関数呼び出しを削除し、eventListener. 基本的に、スクロール イベントが常に発生するように、ユーザーが完全に上または下にスクロールしないようにします。

于 2012-05-05T13:42:04.517 に答える