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

我有算法，看起來像是有用的，謝謝 – Tommi

onscroll事件和滾動按鈕

回答

相關問題