2011-09-17 92 views
1

目前我正在設計一個網站,旨在運行在移動設備和普通電腦上。我面臨的問題是由於我需要一個包含固定位置的頁眉和頁腳的事實。有沒有辦法讓跨平臺溢出:滾動

我試過的第一件事,對我來說似乎最自然,就是使用position:fixed。它在我的電腦上運行得非常好,但它不能在我的iphone上運行(使用ios4)。所以我把它搜索了一下,發現了iScroll。 iScroll是一個旨在解決這個確切問題的JavaScript獨立腳本。問題是這個解決方案打破了非移動平臺上的功能。我也看過YUI ScrollView,但它在非移動平臺上再次遭到破壞。

目前我只有在檢測到手機瀏覽器時才使用iScroll解決此問題。但我正在尋找更清潔和更好的解決方案。

注:iScroll4不支持ie,我也想支持。

+0

棒檢測瀏覽器現在 –

+0

你可能想爲移動瀏覽器完全不同的樣式表,TBH。 –

回答

0

不幸的是,沒有乾淨的解決方案 - 你可以嘗試檢測「觸摸事件」,因爲那些幾乎讓你知道當用戶需要iScroll,並啓動它。

一個簡單的方法來檢測觸摸事件如下,

var $q = something...; 
    try { 
     document.createEvent("TouchEvent"); 
     $q.onmousedown = 'ontouchstart', 
     $q.onmouseup = 'ontouchend', 
     $q.onmousemove = 'ontouchmove'; 
     $q.touches = true; //used in other modules as well 

     //position based on first-finger position 
     $q.getPageX = function(e){ 
      return e.touches[0].pageX; 
     }; 
     $q.getPageY = function(e){ 
      return e.touches[0].pageY; 
     }; 

} catch (e) { 
     //KEY BASED DEVICE 
     $q.onmousedown = 'onmousedown', 
     $q.onmouseup = 'onmouseup', 
     $q.onmousemove = 'onmousemove'; 
     $q.touches = false; 

     //grabbing the position based on Mouse position 
     $q.getPageX = function(e){ 
      return e.clientX; 
     }; 
     $q.getPageY = function(e){ 
      return e.clientY; 
     }; 
} 
+0

您認爲這種方法比基於http請求中用戶代理字段的檢測更好嗎?如果是這樣,爲什麼? – kfir

+2

因爲現在只支持觸摸事件的瀏覽器已經升級到支持iScroll使用的css3轉換。這些瀏覽器包括opera opera,mobile safari,android默認瀏覽器,fennec fox。如果假設明天發佈支持這些功能的新瀏覽器,那麼您將不得不再添加一個案例,而使用這種類型的檢測時,它只會起作用。另外,公司選擇增加對功能的支持 - 當IE9發佈時(最終支持JS有點不錯),許多腳本和網站「爆發」了,因爲它們在IE9上「強制」了它們在IE8上使用的相同黑客。 – Pantelis

+0

不要誤解我的意思,用戶代理檢測非常棒,但是當新功能要添加到新版本的瀏覽器時應該謹慎使用它 - 這增加了打破未來兼容性的風險。 – Pantelis

相關問題