星期四, 4月 19, 2012

[jQuery API] ScrollTop 回傳值為0



遇到一個需求需要將body一開始先設style為display:none;

之後再適當時機的時候再將此屬性移除~

結果會導致IE8再擷取ScorllTop時回傳的值都為0,

原以為是ScorllTop api不支援IE8的問題,但結果是因為加了display:none;
在這篇討論中有人提到:http://api.jquery.com/scrollTop/
Warning: .scrollTop() will return 0 (and setting it to anything won't work) if the element, or a parent element, is set to "display:none;". I had to apply my .scrollTop() logic after the element was shown.


試了很久看了這篇文章IE8 IE9 display:none 引发的 scrollTop 问题


就ok了,有時候繞條路走也不錯喇。

利用以下方法達到display:none的解法
一、使用visibility取代display
body{visibility:hidden;}
Tip:元素在hidden還是會佔DOM的物理空間

二、設定height=0

三、設定不透明度
opacity:0 這個方法同第一個方法

四、在body內自行加一個blank的div
先用大的div蓋住整個window,畫面要還給使用者的時候再remove

目前最快的改法只採用第一個方法就解決了,原因我是要用在body,加上可讀的維護性比height=0高,大家可依自已的case來做測試。

沒有留言:

張貼留言

留個話吧:)