onscrollイベントとスクロールボタン

ここでは単純化されたHTMLです：onscrollイベントとスクロールボタン

<!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フレームワークツリーウィジェットを回避する唯一の方法であるため、この動作を回避する方法を探します。うん、わかった、回避策の回避策。

出典

2012-05-05 Tommi

データの後ろに余分なスペースを入れて、divのスクロールや高さからdivの高さを減らすようにしてください。 – Adil

残念ながら、実際のアプリケーションではデータレンダリングを制御できません。ツリーウィジェットはいくつかのマジックコールを行います。 – Tommi

まあ、それはかなりありませんが、これはトリックを行う必要があります。

<!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-05 13:42:04

'veはアルゴリズムを持っています、うまくいくようです、ありがとう – Tommi

onscrollイベントとスクロールボタン

答えて

関連する問題