遇到一個需求需要將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來做測試。
沒有留言:
張貼留言
留個話吧:)