深層次理解js中的offsetTop、clientTop、scrollTop等

最近需要實現提示定位到頁面某個點(節點)(比如這個點(節點)的文本框沒有輸入值),第一想到的就是用動畫滾動來實現,必然需要用到ScrollTop屬性(標題三個屬性中唯一一個能讀寫的),所以百度學習一波,發現多數帖子是錯誤的或者不完整(片面),所以記錄一波。

1 offsetTop及其相關

  offsetTop指目標控件到上級層(我試了一下div、table都不能算其上級層,應該是到body的top距離,等待以後補充完善(或大神指出))的距離(包括border)。其相關的offsetHeight表示控件的高度,offsetWidth表示控件的寬度。

2 clientTop及其相關

  clientTop這個屬性我試驗了一下,在本人當時的谷歌流浪器中,第一個控件(整個頁面位置排第一)的clientTop爲0,其他都爲2(這是我設置整個頁面控件之間的padding和margin值都爲0)。我就大膽的猜測,clientTop是border和內容之間的區域的長度(等同於padding)產生的值,且不包括border值。然而我設置padding、margin值都爲0,假設失敗,崩潰啊。只能有border解釋,第一個控件不包含border,其他控件都包含border,但是也比較牽強。說實話,我現在真說不出一個所以然來,但是我能坑定client的值相對整個控件來說值非常小,幾乎可以忽略不計,所以我不需要考慮它。clientHeight各個瀏覽器定義都有所不同,但總體比offsetHeight大那麼一點點。一點點是不是忽略不計,可以等同。

3 scrollTop及其相關

  scrollTop就比較好理解,它及其相關描述的是滾動條,scrollTop被捲去的高度,scrollHeight滾動條的高度。

4 scrollHeight、clientHeight、offsetHeight三者比較

  首先clientHeight比offsetHeight大一點點,也就是等同哦,都是表示控件高度(表述總有點錯誤(因爲“一點點”’))。當用3者描述整個頁面的時候,各個瀏覽器都約有不同,感覺沒必要,因爲都是些只讀屬性。

總結

  以上談到的屬性,只有ScrollTop可讀寫,可以利用這個屬性,配合當前控件距離頂層控件的高度scrollTop(上面談到了沒遇到反例,所以scrollTop就暫時表示控件到頂部的距離(反正我用起來沒毛病)),實現動態滾動。其他屬性有爭議不需要。首先我在這裏聲明一下,我寫這篇文章最重要的目的就是記錄我當前遇到的不能解決的問題,暫時用我自己的方式去不合理的解釋。大家勿噴,能幫我解決問題更好。但是,我將的沒疑問的,我都實踐過了,沒毛病。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章