有没有办法让跨平台溢出：滚动

目前我正在设计一个网站，旨在运行在移动设备和普通电脑上。我面临的问题是由于我需要一个包含固定位置的页眉和页脚的事实。有没有办法让跨平台溢出：滚动

我试过的第一件事，对我来说似乎最自然，就是使用position：fixed。它在我的电脑上运行得非常好，但它不能在我的iphone上运行（使用ios4）。所以我把它搜索了一下，发现了iScroll。 iScroll是一个旨在解决这个确切问题的JavaScript独立脚本。问题是这个解决方案打破了非移动平台上的功能。我也看过YUI ScrollView，但它在非移动平台上再次遭到破坏。

目前我只有在检测到手机浏览器时才使用iScroll解决此问题。但我正在寻找更清洁和更好的解决方案。

注：iScroll4不支持ie，我也想支持。

来源

2011-09-17 kfir

棒检测浏览器现在 –

你可能想为移动浏览器完全不同的样式表，TBH。 –

不幸的是，没有干净的解决方案 - 你可以尝试检测“触摸事件”，因为那些几乎让你知道当用户需要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; 
     }; 
}

来源

2011-09-17 21:05:51 Pantelis

您认为这种方法比基于http请求中用户代理字段的检测更好吗？如果是这样，为什么？ – kfir

因为现在只支持触摸事件的浏览器已经升级到支持iScroll使用的css3转换。这些浏览器包括opera opera，mobile safari，android默认浏览器，fennec fox。如果假设明天发布支持这些功能的新浏览器，那么您将不得不再添加一个案例，而使用这种类型的检测时，它只会起作用。另外，公司选择增加对功能的支持 - 当IE9发布时（最终支持JS有点不错），许多脚本和网站“爆发”了，因为它们在IE9上“强制”了它们在IE8上使用的相同黑客。 – Pantelis

不要误解我的意思，用户代理检测非常棒，但是当新功能要添加到新版本的浏览器时应该谨慎使用它 - 这增加了打破未来兼容性的风险。 – Pantelis

有没有办法让跨平台溢出：滚动

回答

相关问题