none
如何取得IE瀏覽器捲軸的捲動距離? RRS feed

  • 問題

  • 我想在事件發生時,取得物件的位置(相對於網頁左上角)

    event.x , event.y 的回傳值要取決於parent element 的定位方式

    因此我用 clientX,clientY 但這是相對於 client area 的座標

    好像還必須加上 捲軸的捲動距離,才會相對於網頁左上角的座標

    我找了半天,只找到window.scrollX 可用於 netscape

    但用於 IE 的,我試過 document.body.scrollTop

    不管卷軸怎樣上下捲動, 傳回值都是0

    請前輩指點一下,謝謝 

     

    p.s. 後來我在一普通的htm網頁上測試

    document.body.scrollTop是可以正常傳回數值的

    但是在我的aspx網頁上就都傳回0 (此網頁有套用master page)

    2007年7月18日 下午 04:59

解答

  • 請問有沒有人測出跟我相同的問題?

    我使用IE6

    希望有人可幫忙測試一下

    提供以下測試程式碼

    第一行存在的情形下

    按下test始終傳回0

    若第一行不存在,就可正確傳回捲軸的捲動距離

    Code Snippet

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
     
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <button'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
     
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <button onclick="alert(document.body.scrollTop )">test</button>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
    </html>

     

    2007年7月19日 下午 03:37
  •  Tommy1231 寫信:
    所以我如果沒有使用這類w3c專屬的dom語法

    且都有分別處理不同瀏覽器的dom

    是否就可以省略 w3c doctype 的宣告?

    當然可以省略這個宣告
     Tommy1231 寫信:

    依你的經驗,省略還是不省略比較好?

    個人偏向不省略,因為如果沒有作筆記來記錄 IE6 會有這個問題,時間一久,到時候自己或維護的人看程式碼時,可能會不知道有這個因,才會有那個果(省略 DOCTYPE 的宣告)

    您可以使用下面的 JavaScript 程式碼,並將原本 alert 所呼叫的程式碼換成 alert(getScrollXY()) 進行測試:
    JavaScript 程式碼
    function getScrollXY()
    {
      var scrX = 0, scrY = 0;
      if (typeof(window.pageYOffset) == 'number')
      {
        // Netscape
        scrY = window.pageYOffset;
        scrX = window.pageXOffset;
      }
      else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
      {
        // DOM
        scrY = document.body.scrollTop;
        scrX = document.body.scrollLeft;
      }
      else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
      {
        // IE6
        scrY = document.documentElement.scrollTop;
        scrX = document.documentElement.scrollLeft;
      }
      return [scrX, scrY];
    }

     

    2007年7月20日 上午 02:12

所有回覆

  • 剛剛發現

    只要網頁最上方有以下這行,就會造成不管卷軸怎樣上下捲動

    document.body.scrollTop 傳回值都是0

    這是 IE的bug嗎? 還是我哪裡搞錯了?

    Code Snippet

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     

    2007年7月18日 下午 05:26
  • 請問有沒有人測出跟我相同的問題?

    我使用IE6

    希望有人可幫忙測試一下

    提供以下測試程式碼

    第一行存在的情形下

    按下test始終傳回0

    若第一行不存在,就可正確傳回捲軸的捲動距離

    Code Snippet

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
     
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <button'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
     
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <button onclick="alert(document.body.scrollTop )">test</button>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
    </html>

     

    2007年7月19日 下午 03:37
  • 感謝,我查了一下

    document.documentElement 是w3c的標準

    但幾家瀏覽器都有替代的語法

    所以我如果沒有使用這類w3c專屬的dom語法

    且都有分別處理不同瀏覽器的dom

    是否就可以省略 w3c doctype 的宣告?

    依你的經驗,省略還是不省略比較好?

    2007年7月19日 下午 06:18
  •  Tommy1231 寫信:
    所以我如果沒有使用這類w3c專屬的dom語法

    且都有分別處理不同瀏覽器的dom

    是否就可以省略 w3c doctype 的宣告?

    當然可以省略這個宣告
     Tommy1231 寫信:

    依你的經驗,省略還是不省略比較好?

    個人偏向不省略,因為如果沒有作筆記來記錄 IE6 會有這個問題,時間一久,到時候自己或維護的人看程式碼時,可能會不知道有這個因,才會有那個果(省略 DOCTYPE 的宣告)

    您可以使用下面的 JavaScript 程式碼,並將原本 alert 所呼叫的程式碼換成 alert(getScrollXY()) 進行測試:
    JavaScript 程式碼
    function getScrollXY()
    {
      var scrX = 0, scrY = 0;
      if (typeof(window.pageYOffset) == 'number')
      {
        // Netscape
        scrY = window.pageYOffset;
        scrX = window.pageXOffset;
      }
      else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
      {
        // DOM
        scrY = document.body.scrollTop;
        scrX = document.body.scrollLeft;
      }
      else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
      {
        // IE6
        scrY = document.documentElement.scrollTop;
        scrX = document.documentElement.scrollLeft;
      }
      return [scrX, scrY];
    }

     

    2007年7月20日 上午 02:12