Question

目前，我正在开发一个旨在在移动设备和普通计算机上运行的网站。我面临的问题是由于我需要一个带有固定位置的页眉和页脚这一事实。

我尝试的第一件事，对我来说似乎最自然，就是使用position：fixed。它在我的电脑上工作得很好，但它在我的iphone上没有用（使用ios4）。所以我google了一下，找到了iScroll。 iScroll是一个JavaScript独立脚本，旨在解决这个问题。问题是这个解决方案破坏了非移动平台上的功能。我也看了YUI ScrollView，但它又在非移动平台上被打破了。

目前我只有在检测到移动浏览器时才使用iScroll解决了这个问题。但我正在寻找一种更清洁，更好的解决方案。

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

Answer 1

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

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

1 个答案: