인터넷정보

문서를 휠마우스 처럼 자동으로 스클롤 시키기

알 수 없는 사용자 2007. 10. 17. 17:48

http://oxtag.com/html/ex/wheelmouse.html

미리보기에서 마우스 오른쪽 클릭하시면 휠마우스가 작동이 됩니다.
그리고 해제는 다시 한번 마우스 오른쪽을 클릭하시면 되구요.
휠마우스 작동이 되면 마우스를 스크롤바 수평선상에서 아래 쪽이나 위 쪽에 위치하면 자동으로 스클롤됩니다.

미리보기에서 스크립트를 다운 받은 후 삽입할 문서의 헤드에 넣으면 되구요. 경로만 수정하면 되겠죠.
아니면 아래 소스를 적용할 문서내에 삽입하세요.

<script language="Javascript" src="http://oxtag.com/html/js/mouse/wheelmouse.js"></script>


wheelmouse.js 소스는 아래와 같습니다. 속도 조절은 중간쯤에 주석 달았으니까 여길 수정하시면 됩니다.

<script>
<!--
  var mouseY , winY , scrollY , modes , clicked ;
  clicked = "false" ;

  function scrollit() {
    if ( clicked == "true" ) {
      scrollY = document.body.scrollTop ;
      if ( modes == 1 ) {
        scrollY -= 30 ;
        if ( scrollY < 0 ) { scrollY = 0 ; }
      } else if ( modes == 2 ) {
        scrollY -= 10 ;
        if ( scrollY < 0 ) { scrollY = 0 ; }
      } else if ( modes == 4 ) {
        scrollY += 10 ;
      } else if ( modes == 5 ) {
        scrollY += 20 ;
      }
      window.scroll( 0 , scrollY ) ;
      //alert( "mode=" + modes + "  mouseY=" + mouseY + "  winY=" + winY + "  scrollY=" + scrollY );
      setTimeout( 'scrollit()' , 100 ) ; // 휠 마우스 속도 조절 수치가 낮을 수록 빠름.
    }
  }

  function clicks() {
    if (event.button==2 || event.button==3) {
      if ( clicked == "false" ) {
        clicked = "true" ;
        window.status="휠마우스 작동";
        alert( "휠마우스 작동" ) ;
        scrollit() ;
      } else {
        clicked = "false" ;
        window.status="휘마우스 멈춤";
        alert( "휘마우스 멈춤" ) ;
      }
    }
  }

  function moves() {
    mouseY = window.event.clientY ;
    winY = document.body.clientHeight ;
    if ( mouseY < winY/5 ) {
      modes = 1 ;
    } else if ( mouseY < winY*2/5 ) {
      modes = 2 ;
    } else if ( mouseY > winY*4/5 ) {
      modes = 5 ;
    } else if ( mouseY > winY*3/5 ) {
      modes = 4 ;
    } else {
      modes = 3 ;
    }
  }

  document.onmousedown = clicks
  document.onmousemove = moves
//-->
</script>
반응형