À̵¿¸·´ë »ç¿ë¾Ê°í ÆäÀÌÁö ¿òÁ÷À̱âgo to UP


ÇÑ ÆäÀÌÁö°¡ ³Ñ¾î°¡´Â ÆäÀÌÁö¿¡¼­ ÆäÀÌÁöÀÇ ³ª¸ÓÁö¸¦ º¸±â À§Çؼ­´Â À̵¿¸·´ë¸¦ ²ø°Å³ª pageUpÀ̳ª pageDown ÀÚÆÇÀ» ÀÌ¿ëÇÏ¿© ÆäÀÌÁö¸¦ ¿òÁ÷ÀÔ´Ï´Ù. ¿©±â¼­´Â ÀÌµé ¹æ¹ýÀ» »ç¿ëÇÏÁö ¾Ê°í ¸¶¿ì½º·Î ÆäÀÌÁö¸¦ ´©¸£°í À̵¿½ÃÄѼ­ ÆäÀÌÁö¸¦ ¿òÁ÷ÀÔ´Ï´Ù. ¸¶¿ì½º¸¦ ´©¸£°í ²ø±âÇÏ¿© ¸¶¿ì½º¸¦ ³õÀ¸¸é ´©¸¥°÷°ú ³õÀº °÷ÀÇ »çÀÌÀÇ °Å¸® ¸¸Å­ÀÇ ºñÀ²·Î ÆäÀÌÁö¸¦ ¿òÁ÷ÀÔ´Ï´Ù. ´©¸¥°÷°ú ³õÀº °÷ÀÇ °Å¸®°¡ Ŭ¼ö·Ï ÆäÀÌÁö´Â ºü¸£°Ô ¿òÁ÷ÀÔ´Ï´Ù.

ÆäÀÌÁö°¡ ¿òÁ÷ÀÌ´Â Áß¿¡ ¸¶¿ì½º¸¦ ´©¸£¸é ¿òÁ÷ÀÓÀ» ¸ØÃã´Ï´Ù. ´Ù½Ã ¿òÁ÷À̱â À§Çؼ­´Â ´Ù½Ã ¸¶¿ì½º¸¦ ´©¸£°í ²ø±âÇÏ¸é µË´Ï´Ù. ÀÌ·±µ¿ÀÛÀ» ÇÏ´Â °ÍÀº 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; 
  }
}
¸ÕÀú BODYÀÇ onLoad À̺¥Æ®·Î ÆäÀÌÁö¸¦ ¿òÁ÷ÀÌ´Â ¼Óµµ¸¦ ¾ò´Â mousedown, mouseup À̺¥Æ®¸¦ ÁöÁ¤Çϰí ie4³ª nn4ÀÎÁö ±×¸®°í scrollBy¸¦ Áö¿øÇÏ´ÂÁö¸¦ È®ÀÎÇÕ´Ï´Ù. ¸¹Àº ¹öÀüÀÇ ºê¶ó¿ìÀú¿¡¼­ ƯÁ¤ÇÔ¼ö¸¦ »ç¿ëÇϱâ Àü¿¡ ±× ÇÔ¼ö¸¦ Áö¿øÇÏ´ÂÁö¸¦ È®ÀÎÇÏ¸é ½±°Ô ¿¡·¯¸¦ ¿¹¹æÇÒ ¼ö ÀÖ½À´Ï´Ù.

onmousemove, ondblclick ´Â ¸¶¿ì½º¸¦ ´©¸£°í ²ø±â ÇßÀ» ¶§, À̺¥Æ®ÀÇ µ¿ÀÛ¿¡ false¸¦ ¹ÝȯÇÏ¿© ±ÛÀÚµéÀÌ ¼±ÅûóŰ¡ µÇÁö¾Ê°Ô ÇÕ´Ï´Ù. mousemove À̺¥Æ®µµ nn4¿¡¼­ ie4¿Í °°ÀÌ ÁöÁ¤ÇÒ ¼ö ÀÖÁö¸¸, ÆäÀÌÁöÀÇ ¸µÅ©¿¡ ¸¶¿ì½º Ä¿¼­°¡ °¬À»¶§ Ä¿¼­ÀÇ ¸ð¾çÀÌ ¼Õ°¡¶ô ¸ð¾çÀ¸·Î ¹Ù²îÁö ¾Ê¾Æ mousedownÀ¸·Î ÁöÁ¤Çϰí mouseupÀ¸·Î ÇØÁ¦¸¦ ÇÕ´Ï´Ù. ±×¸®°í ÀÌ ÆäÀÌÁöÀÇ µ¿ÀÛ¿¡ »ç¿ëÇÒ º¯¼öµéÀ» ÆäÀÌÁö¸¦ ¿òÁ÷ÀÌ´Â ÇÔ¼ö¿¡¼­ ÂüÁ¶ÇÒ ¼ö ÀÖ°Ô ¿ÜºÎº¯¼ö·Î ¼±¾ðÇÕ´Ï´Ù.

function scrollPage() {
  window.scrollBy(scrollLeftBit, scrollTopBit)
  scrollPage_ID = setTimeout("scrollPage()", 10)
}
ÆäÀÌÁö¸¦ ¿òÁ÷ÀÌ´Â ÇÔ¼öÀÔ´Ï´Ù. scrollLeftBit´Â ¼öÆòÀ¸·Î ¿òÁ÷ÀÏ °Å¸®À̰í scrollTopBit´Â ¼öÁ÷À¸·Î ¿òÁ÷ÀÏ °Å¸®ÀÔ´Ï´Ù. ÀÌµé µÎ º¯¼ö´Â mousedown À̺¥Æ® ÁöÁ¤ÇÔ¼öÀÎ mDown()°ú mouseup À̺¥Æ® ÁöÁ¤ÇÔ¼ö mUp()¿¡¼­ ¾ò½À´Ï´Ù.
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
  }
}
¸¶¿ì½º¸¦ ´©¸£¸é ½ÇÇàÇÏ´Â ÇÔ¼öÀÔ´Ï´Ù. ÆäÀÌÁö°¡ ¿òÁ÷À̰í ÀÖÀ» ¶§ ¿òÁ÷ÀÓÀ» ¸ØÃß°Ô clearTimeout(scrollPage_ID);À» ³Ö¾îÁÝ´Ï´Ù. ±×¸®°í ¸¶¿ì½º¸¦ ³õ¾ÒÀ» ¶§ÀÇ ÁÂÇ¥¿Í °Å¸®¸¦ ¾Ë±â À§Çؼ­ óÀ½ ¸¶¿ì½º¸¦ ´©¸¥ °÷ÀÇ ÁÂÇ¥¸¦ ±â·ÏÇÕ´Ï´Ù. nn4¿¡¼­´Â ¸¶¿ì½º¸¦ ´©¸£°í ²ø¶§ ±ÛÀÚµéÀÌ ¼±ÅûóŰ¡ µÇÁö¾Ê°Ô mousemove À̺¥Æ®¸¦ ÁöÁ¤ÇÕ´Ï´Ù.
function mMove() { return false; }
±ÛÀÚµéÀÌ ¼±ÅõÇÁö ¾Ê°Ô 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(); 
}
¸¶¿ì½º¸¦ ´©¸£°í ³õÀ¸¸é ÀÛµ¿ÇÏ´Â mUp() ÇÔ¼öÀÔ´Ï´Ù. ¸¶¿ì½º¸¦ ³õ¾ÒÀ» ¶§ÀÇ ÁÂÇ¥¸¦ ±â·ÏÇÏ°í ¸¶¿ì½º¸¦ ´­·¶À» ¶§ÀÇ ÁÂÇ¥¿ÍÀÇ °Å¸®¸¦ ±¸ÇÕ´Ï´Ù. ÀÌ °Å¸® ¸¸Å­ÀÇ ºñÀ²·Î ÆäÀÌÁö¸¦ ¿òÁ÷ÀÔ´Ï´Ù. nn4¿¡¼­ ¸µÅ©¿¡ ¸¶¿ì½º°¡ °¬À»¶§ ¼Õ°¡¶ô ¸ð¾çÀ¸·Î ¹Ù²Ù±â À§ÇØ mousemove À̺¥Æ®¸¦ ÇØÁ¦ÇÕ´Ï´Ù.

(scrollTopEnd - scrollTopStart)/10´Â ³Ê¹« »¡¸® ÆäÀÌÁö¸¦ ¿òÁ÷ÀÌÁö ¾Ê°Ô ¸¶¿ì½º¸¦ ´©¸£°í ³õÀº °Å¸®¿¡¼­ 10À» ³ª´©¾î ÁÝ´Ï´Ù. ÀÌ ÆäÀÌÁö¿¡¼­´Â ¸¶¿ì½º¸¦ À§·Î ÇÏ¸é ÆäÀÌÁö À§ÂÊÀ¸·Î ÆäÀÌÁö°¡ ¿òÁ÷ÀÔ´Ï´Ù. ¹Ý´ë·Î ÇÒ·Á¸é ((scrollTopStart - scrollTopEnd)/10) ·Î µÎ°³ÀÇ ÀÎÀÚ¸¦ ¼­·Î ¹Ù²ãÁÖ¸é µË´Ï´Ù. ±×¸®°í ÆäÀÌÁö¸¦ ¿òÁ÷ÀÌ´Â ÇÔ¼ö scrollPage()¸¦ ½ÇÇàÇÕ´Ï´Ù.

¸¶¿ì½º¸¦ ´©¸£°í ²ø±âÇØº¸¼¼¿ä.. ÆäÀÌÁö°¡ ¿òÁ÷ÀÔ´Ï´Ù.


ÇÑ °¡Áö ¹®Á¦°¡ win95 + (nn4.01 ~ nn4.05) ±îÁöÀÇ ÆÇ¿¡¼­ ÀÖ½À´Ï´Ù. ÀÌ ÆäÀÌÁö´Â ¼öÁ÷À¸·Î¸¸ ¿òÁ÷ÀÌ´Â À̵¿¸·´ë°¡ ÀÖ½À´Ï´Ù. ¸¸¾à, ÆäÀÌÁöÀÇ Æøº¸´Ù Å« ³»¿ëÀÌ ÆäÀÌÁö¿¡ ÀÖ´Ù¸é ¼öÆò À̵¿¸·´ëµµ »ý±é´Ï´Ù. ÀÌ ¶§ nn4¿¡¼­ µ¿ÀÛÀÌ ºÒ¾ÈÇÕ´Ï´Ù. ÀÌ ÆäÀÌÁö¸¦ ¼öÆòÀ̵¿¸·´ë°¡ »ý±â°Ô âÀÇ Å©±â¸¦ ¹Ù²Ù¾î¼­ ÇØº¸¼¼¿ä. ¾î¶² Áõ»óÀÎÁö ¾Ë°ÍÀÔ´Ï´Ù. ie4¿¡¼­´Â ¹®Á¦°¡ ¾ø½À´Ï´Ù. ±×·¡¼­ ÀÌ ÆäÀÌÁöÀÇ ¼Ò½º´Â nn4¿¡¼­´Â ¼öÆòÀ̵¿¸·´ë°¡ »ý±âÁö ¾Ê´Â ÆäÀÌÁö¿¡¼­ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

¿©·¯°¡Áö·Î ÇØºÃ´Âµ¥ ÇØ°áÇÒ ¼ö ¾ø¾ú½À´Ï´Ù. nn4ÀÇ ¹ö±×¶ó°í »ý°¢ÀÌ µå´Âµ¥, ¹æ¹ýÀ» ¾Æ½Ã¸é ¸ÞÀÏ ºÎŹÇÕ´Ï´Ù.

¾Æ·¡ÀÇ ¸µÅ©´Â ¼öÆòÀ̵¿¸·´ë°¡ »ý±âÁö ¾Ê°ÔÇÏ´Â ÆäÀÌÁöÀÔ´Ï´Ù. ¼öÆòÀ̵¿À» ÇÒ ¼ö Àִ°ÍÀº ¾Æ´Õ´Ï´Ù.

nn4 ¹®Á¦ ¼öÁ¤ÇÑ ÆäÀÌÁö



TOP