<select> 下拉菜单在带有 iScroll4 脚本的 iPhone 浏览器中闪烁答案

【问题标题】：<select> drop down flashing on focus in iphone browser with iScroll4 script<select> 下拉菜单在带有 iScroll4 脚本的 iPhone 浏览器中闪烁
【发布时间】：2011-04-24 15:01:34
【问题描述】：

在 iphone http://jsbin.com/unese4/8 中查看此演示页面，页面底部有一个下拉菜单打开但无法正常工作。

这个问题和这个问题有关iScroll 4 not working with form <select> element iPhone Safari and Android browser

【问题讨论】：

标签： javascript iphone css mobile-safari iscroll4

【解决方案1】：

其实你的问题和这个问题有关：

webkit-transform issue on safari using select elements

当输入在 iOS Safari 中获得焦点时，它会检查输入是否在视图中。如果不是，Safari 会强制滚动文档以及包含输入的元素，以使其可见。

iScroll 使用 CSS 变换来移动可滚动区域，看起来 Safari 的行为在 selects 上被破坏了——它没有注意到变换，认为 select 不在视线范围内，然后滚动它的容器 (#scrollable) 使其可见（同样，不考虑转换），这使它远离视野。

这基本上是一个 iOS 错误，受此问题影响的 Web 开发人员应该reported to Apple！解决方法可以在 iScroll 中最有效地实施，因此我鼓励您将问题报告给其开发人员。

也就是说，我想出了一个解决方法，您可以在此答案的底部找到该解决方法。您可以通过 iScroll 实例调用一次来使用它：

workAroundiScrollSelectPositioning(myScroll);

现场演示在您的 jsbin 粘贴 here。它在select 获得焦点时触发，并执行三件事：

记住滚动位置，并告诉 iScroll 立即滚动到左上角（删除任何变换），并将滚动区域的 top 和 left CSS 属性设置为当前滚动位置。视觉上，一切看起来都一样，但滚动区域现在以 Safari 可以看到的方式定位。
阻止 iScroll 看到任何触摸（这很丑陋，但它会阻止 iScroll 在我们重新定位滚动区域时对其应用变换）。
当select 失去焦点时，将一切恢复原状（恢复原始位置并变换并停止阻塞 iScroll）。

在某些情况下，元素的位置可能会被搞砸（例如，当 textarea 具有焦点但仅部分显示在视图中，而您键入并导致 Safari 尝试将其余部分显示在视图中时），但是这些最好在 iScroll 中修复。

function workAroundiScrollSelectPositioning(iscroll){
    iscroll.scroller.addEventListener('focusin', function(e){
        if (e.target.tagName === 'SELECT') {
            var touchEvent = 'ontouchstart' in window ? 'touchmove' : 'mousemove',
                touchListener = {
                    handleEvent: function(e){
                        e.stopPropagation();
                        e.stopImmediatePropagation();
                    }
                },
                blurListener = {
                    oldX: iscroll.x,
                    oldY: iscroll.y,
                    handleEvent: function(e){
                        iscroll.scroller.style.top = '';
                        iscroll.scroller.style.left = '';
                        iscroll.scrollTo(this.oldX, this.oldY, 0);
                        e.target.removeEventListener('blur', blurListener, false);
                        iscroll.scroller.removeEventListener(touchEvent, touchListener, true);
                    }
                };
            iscroll.scroller.style.top = iscroll.y + 'px';
            iscroll.scroller.style.left = iscroll.x + 'px';
            iscroll.scrollTo(0, 0, 0);
            e.target.addEventListener('blur', blurListener, false);
            iscroll.scroller.addEventListener(touchEvent, touchListener, true);
        }
    }, false);
}

【讨论】：

【解决方案2】：

您可以在该位置使用自定义表格视图，假设您希望在用户单击文本字段时显示下拉列表。因此，当用户在文本字段上单击时，委托方法会被调用 TextFieldBeginEditing 并在其中创建一个小表格视图。看起来像一个下拉列表...

【讨论】：

【解决方案3】：

这是修改后的函数 workAroundiScrollSelectPositioning 对我有用。

function workAroundiScrollSelectPositioning(iscroll){
var touchEvent = 'ontouchstart' in window ? 'touchstart' : 'mousemove',
    oldX, oldY;
iscroll.scroller.addEventListener('focusin', function(e){
    if (e.target.tagName === 'SELECT') {
        var blurListener = {
                oldX: oldX,
                oldY: oldY,
                handleEvent: function(e){
                    iscroll.scroller.style['margin-top'] = '';
                    iscroll.scroller.style.left = '';
                    iscroll.scrollTo(oldX, oldY, 0);
                    e.target.removeEventListener('blur', blurListener, false);
                }
            };
        iscroll.scroller.style['margin-top'] = oldY + 'px';
        iscroll.scroller.style.left = oldX + 'px';
        iscroll.scrollTo(0, 0, 0);
        e.target.addEventListener('blur', blurListener, false);
    }
}, false);
iscroll.scroller.addEventListener(touchEvent, {
    handleEvent: function(e){
        if (e.target.tagName === 'SELECT') {
            oldX = iscroll.x,
            oldY = iscroll.y;
            e.stopPropagation();
            e.stopImmediatePropagation();
        }
    }
}, true);}

【讨论】：