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 모두 (초기 위치)에 스크롤되지 않을 때 문제가된다 스크롤 막대의 상단에 삼각형 기호 작은 버튼이 이벤트가 발생하지 않는이 . 논리적 일 수도 있지만 드래그 앤 드롭이 가능한 도우 즈 프레임 워크 트리 위젯을 사용하는 유일한 방법이기 때문에이 문제를 해결하는 방법을 모색합니다. 네, 알다시피 해결 방법에 대한 해결 방법이 있습니다.

출처

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 이벤트 및 스크롤 버튼

답변

관련 문제