9

我有一个要在 ipad 上支持的 asp.net 网站。当我专注于输入元素并且键盘弹出时，位置固定的标题 div（通常与页面一起滚动）将弹出页面的距离等于键盘占用的距离并在持续时间内冻结在那里输入过程。将键盘放回原位后， div 会弹回原位并再次正常运行。我在 iOS5 上测试所以 position: fixed 应该被支持。

这是一个已知的问题？有人遇到过这个并处理过吗？我似乎在这方面找不到任何东西。

4

3 回答 3

18

固定定位在 iOS5/iOS6/iOS7 上被破坏。

编辑 3：请参阅 iOS8 的此答案接近尾声的工作修复链接。

Position:fixed 在以下情况下被破坏：

a) 页面被缩放

或者

b) iPad/iPhone 上的键盘显示（由于输入获得焦点）。

您可以在jsbin.com/icibaz/3中通过打开链接并缩放或赋予输入焦点来自己查看错误。您可以自己编辑编辑html。

关于错误 (a) 和 (b) 的注意事项：

  1. 当输入获得焦点并且键盘显示时，固定的 divtop: 0px; left: 0px;将显示在错误的位置（屏幕顶部上方或下方）。

  2. 该问题似乎与屏幕上输入的自动居中有关（更改 window.pageYOffset）。

  3. 这似乎是计算错误，而不是重绘错误：如果您top:在 onScroll 事件上强制更改（例如在 0px 和 1px 之间切换），您可以看到固定的 div 移动了一个像素，但它仍然是错误的地方。

  4. 我之前使用的一种解决方案是在输入获得焦点时隐藏固定的 div - 请参阅我写的另一个答案。

  5. 固定的 div 似乎卡在了键盘打开时页面上的相同绝对位置。

  6. 那么当输入有焦点时，也许将 div 更改为绝对定位？编辑 3：使用此解决方案查看底部的评论。或者也许在打开键盘之前保存 pageXOffset/pageYOffset 值，并在 onScroll 事件中计算这些值与当前 pageXOffset/pageYOffset 值（打开键盘后的当前值）之间的差异，并将固定 div 偏移该差异。

  7. 如果页面被缩放，固定定位似乎存在不同的问题 -在此处尝试（这里也有关于 Android 支持在评论中修复的好信息）。

编辑1：重现使用jsbin（不是jsfiddle）并使用jsbin的全屏视图（不是编辑页面）。避免使用 jsfiddle（和 jsbin 的编辑视图），因为它们将代码放在 iframe 中，这会干扰固定定位和 pageYOffset。

编辑 2：iOS 6 和 iOS 7 Mobile Safariposition:fixed;仍然存在相同的问题 - 大概是设计使然！。

编辑3：（b）的一个工作解决方案是当输入获得焦点时，将标题更改为绝对定位，然后在页面滚动事件上设置标题顶部。这个解决方案：

  • 当输入没有聚焦时使用固定定位（使用 window.onscroll 有可怕的抖动）。
  • 不允许捏缩放（避免上面的错误（a））。
  • 输入获得焦点后使用绝对定位和 window.pageYOffset（因此标题正确定位）。
  • 如果在输入有焦点时滚动，请将 style.top 设置为等于 pageYOffset（即使在 iOS8 上，由于 onscroll 事件延迟，标题也会有些抖动）。
  • 如果在 iOS8 上的应用程序中使用 UIWebView，或者使用 <=iOS7，如果在输入有焦点时滚动，标题将超级抖动，因为在滚动完成之前不会触发 onscroll。
  • 一旦输入失去焦点，就返回固定位置的标题（示例使用 input.onblur，但可能更适合使用 document.body.onfocus）。
  • 当心可用性失败，如果标题太大，输入可能会被遮挡/覆盖。
  • 由于键盘显示时 iOS 页面/视口高度中的错误，我无法为页脚工作。
  • 使用http://jsbin.com/xujofoze/4/edit编辑示例并使用http://output.jsbin.com/xujofoze/4/quiet查看
于 2012-05-25T02:12:24.573 回答
0

根据我的需要，我发现使用绝对定位的标题更容易，在滚动之前隐藏它并在完成滚动时显示它（我需要相同的代码来支持 iOS4 和 Android）。

出于我的目的，我隐藏了事件的标题，并在事件上touchstart再次显示它（加上一些计时器以提高响应能力/减少闪烁）。它闪烁，但这是我能找到的最佳折衷方案。可以使用事件检测滚动的开始（jQuery 会这样做），但我发现对我来说效果不佳，因为：touchendscrolltouchmovetouchmove

  1. 通常，iPad 在滚动之前无法重新绘制（即绝对标题仍然卡住 - 即使top在滚动开始之前已更改）。

  2. 当输入元素获得焦点时，iPad 会自动将元素居中，但不会触发 scrollstart 事件（因为如果只是click输入，则不会触发 touchmove）。

通过使用固定和绝对定位的混合方法可以改进在 iOS5 上实现固定标头：

  • 使用 iOS5 的固定定位，直到输入获得焦点。

  • 当输入获得焦点（键盘显示）时，更改为 iOS4 绝对定位代码。

  • 当键盘关闭时，变回固定位置。

检测键盘何时关闭的代码（例如使用键盘隐藏键）是DOMFocusOut在元素上注册事件document并执行类似于以下代码的操作。需要超时，因为DOMFocusOut事件可以在一个元素获得焦点和另一个元素失去焦点之间触发。

function document_DOMFocusOut() {
    clearTimeout(touchBlurTimer);
    touchBlurTimer = setTimeout(function() {
        if (document.activeElement == document.body) {
            handleKeyboardHide();
        }
    }.bind(this), 400);
}

我的固定标头代码类似于：

{
    setup: function() {
        observe(window, 'scroll', this, 'onWinScroll');
        observe(document, 'touchstart', this, 'onTouchStart');
        observe(document, 'touchend', this, 'onTouchEnd');
        if (isMobile) {
            observe(document, 'DOMFocusOut', this, 'docBlurTouch');
        } else if (isIE) {
        // see http://ajaxian.com/archives/fixing-loss-of-focus-on-ie for code to go into this.docBlurIe()
            observe(document, 'focusout', this, 'docBlurIe');
        } else {
            observe(isFirefox ? document : window, 'blur', this, 'docBlur');
        }
    },

    onWinScroll: function() {
        clearTimeout(this.scrollTimer);
        this.scrolling = false;
        this.rehomeAll();
    },

    rehomeAll: function() {
        if ((isIOS5 && this.scrolling) || isIOS4 || isAndroid) {
            this.useAbsolutePositioning();
        } else {
            this.useFixedPositioning();
        }
    },

    // Important side effect that this event registered on document on iOs. Without it event.touches.length is incorrect for any elements in the document using the touchstart event!!!
    onTouchStart: function(event) {
        clearTimeout(this.scrollTimer);
        if (!this.scrolling && event.touches.length == 1) {
            this.scrolling = true;
            this.touchStartTime = inputOrOtherKeyboardShowingElement(event.target) ? 0 : (new Date).getTime();
            // Needs to be in touchStart so happens before iPad automatic scrolling to input, also not reliable using touchMove (although jQuery touch uses touchMove to unreliably detect scrolling).
            this.rehomeAll();
        }
    },

    onTouchEnd: function(event) {
        clearTimeout(this.scrollTimer);
        if (this.scrolling && !event.touches.length) {
            var touchedDuration = (new Date).getTime() - this.touchStartTime;
            // Need delay so iPad can scroll to the input before we reshow the header.
            var showQuick = this.touchStartTime && touchedDuration < 400;
            this.scrollTimer = setTimeout(function() {
                if (this.scrolling) {
                    this.scrolling = false;
                    this.rehomeAll();
                }
            }.bind(this), showQuick ? 0 : 400);
        }
    },

    // ... more code
}

jQuery mobile 支持 scrollstart 和 scrollstop 事件：

var supportTouch = $.support.touch,
    scrollEvent = "touchmove scroll",
    touchStartEvent = supportTouch ? "touchstart" : "mousedown",
    touchStopEvent = supportTouch ? "touchend" : "mouseup",
    touchMoveEvent = supportTouch ? "touchmove" : "mousemove";

function triggerCustomEvent( obj, eventType, event ) {
    var originalType = event.type;
    event.type = eventType;
    $.event.handle.call( obj, event );
    event.type = originalType;
}

// also handles scrollstop
$.event.special.scrollstart = {

    enabled: true,

    setup: function() {

        var thisObject = this,
            $this = $( thisObject ),
            scrolling,
            timer;

        function trigger( event, state ) {
            scrolling = state;
            triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
        }

        // iPhone triggers scroll after a small delay; use touchmove instead
        $this.bind( scrollEvent, function( event ) {

            if ( !$.event.special.scrollstart.enabled ) {
                return;
            }

            if ( !scrolling ) {
                trigger( event, true );
            }

            clearTimeout( timer );
            timer = setTimeout(function() {
                trigger( event, false );
            }, 50 );
        });
    }
};
于 2012-05-28T23:57:04.347 回答
0

这在 iOS13 中仍然是一个问题（当在“textarea”字段中删除长文本时，固定标题会跳转到该“textarea”字段的开头，阻碍视图），因此，我想我分享一下我的快速修复：

由于我的页脚相当大，我没有任何 JS，只是在页脚中添加了比固定页眉更大的 z-index。眼不见，心不烦。

于 2021-04-27T19:46:50.883 回答