페이지가 움직이는 중에 마우스를 누르면 움직임을 멈춤니다. 다시 움직이기 위해서는 다시 마우스를 누르고 끌기하면 됩니다. 이런동작을 하는 것은 document의 이벤트인 mousedown, mouseup을 사용하여 nn4, ie4가 지원하는 window의 함수인 scrollBy()를 사용합니다.

window의 페이지를 움직이는데 사용하는 함수는 scroll(), scrollBy(), scrollTo() 3가지가 있습니다. scroll()은 JavaScript1.1에서 지원이 되고 scrollBy(), scrollTo()는 JavaScript1.2에서 지원됩니다.

scroll(x, y)과 scrollTo(x, y)는 같은 동작을 하고 지정한 pixel의 좌표로 페이지를 움직입니다. 이것은 절대 좌표입니다. scrollBy(x, y)는 수평으로 x pixel, 수직으로 y pixel 만큼 페이지를 움직입니다. 현재의 위치에서 움직일 거리를 더하는 상대적인 거리를 지정합니다. 이 페이지의 용도에는 이것이 다루기 가장 편리합니다.

마우스를 누르고 끌기하여 움직인 거리를 scrollBy(수평거리, 수직거리)로 페이지를 움직입니다.

 
n4=(document.layers)?true:false;
e4=(document.all)?true:false;

function init() {

  if(window.scrollBy && (n4 || e4 )) {
    if(n4) { 
      document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP|Event.DBLCLICK); 
    }
    else if(e4) document.onmousemove=mMove

    document.onmousedown = mDown
    document.onmouseup = mUp
    document.ondblclick=new Function("return false");

    scrollTopStart=scrollTopEnd=scrollTopBit=0; 
    scrollLeftStart=scrollLeftEnd=scrollLeftBit=0; 
  }
}

onmousemove, ondblclick 는 마우스를 누르고 끌기 했을 때, 이벤트의 동작에 false를 반환하여 글자들이 선택상태가 되지않게 합니다. mousemove 이벤트도 nn4에서 ie4와 같이 지정할 수 있지만, 페이지의 링크에 마우스 커서가 갔을때 커서의 모양이 손가락 모양으로 바뀌지 않아 mousedown으로 지정하고 mouseup으로 해제를 합니다. 그리고 이 페이지의 동작에 사용할 변수들을 페이지를 움직이는 함수에서 참조할 수 있게 외부변수로 선언합니다.

function scrollPage() {
  window.scrollBy(scrollLeftBit, scrollTopBit)
  scrollPage_ID = setTimeout("scrollPage()", 10)
}

function mDown(e) {
  if(self.scrollPage_ID) clearTimeout(scrollPage_ID);

  if(n4) { 
    document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove=mMove 

    scrollTopStart = e.pageY
    scrollLeftStart = e.pageX
  }
  else if(e4) {
    scrollTopStart = event.clientY
    scrollLeftStart = event.clientX
  }
}

function mMove() { return false; }

function mUp(e) { 
  if(self.scrollPage_ID) clearTimeout(scrollPage_ID);

  if(n4) {
    document.onmousemove=0
    document.releaseEvents(Event.MOUSEMOVE);

    scrollTopEnd = e.pageY
    scrollLeftEnd = e.pageX
  }
  else if(e4) {
    scrollTopEnd = event.clientY
    scrollLeftEnd = event.clientX
  }
  scrollTopBit = Math.floor((scrollTopEnd - scrollTopStart)/10)
  scrollLeftBit = Math.floor((scrollLeftEnd - scrollLeftStart)/10)

  scrollPage(); 
}

(scrollTopEnd - scrollTopStart)/10는 너무 빨리 페이지를 움직이지 않게 마우스를 누르고 놓은 거리에서 10을 나누어 줍니다. 이 페이지에서는 마우스를 위로 하면 페이지 위쪽으로 페이지가 움직입니다. 반대로 할려면 ((scrollTopStart - scrollTopEnd)/10) 로 두개의 인자를 서로 바꿔주면 됩니다. 그리고 페이지를 움직이는 함수 scrollPage()를 실행합니다.

마우스를 누르고 끌기해보세요.. 페이지가 움직입니다.


한 가지 문제가 win95 + (nn4.01 ~ nn4.05) 까지의 판에서 있습니다. 이 페이지는 수직으로만 움직이는 이동막대가 있습니다. 만약, 페이지의 폭보다 큰 내용이 페이지에 있다면 수평 이동막대도 생깁니다. 이 때 nn4에서 동작이 불안합니다. 이 페이지를 수평이동막대가 생기게 창의 크기를 바꾸어서 해보세요. 어떤 증상인지 알것입니다. ie4에서는 문제가 없습니다. 그래서 이 페이지의 소스는 nn4에서는 수평이동막대가 생기지 않는 페이지에서 사용할 수 있습니다.

여러가지로 해봤는데 해결할 수 없었습니다. nn4의 버그라고 생각이 드는데, 방법을 아시면 메일 부탁합니다.

아래의 링크는 수평이동막대가 생기지 않게하는 페이지입니다. 수평이동을 할 수 있는것은 아닙니다.

nn4 문제 수정한 페이지