Javascript 使用iScroll4脚本在iphone浏览器中以焦点闪烁的下拉列表

查看iphone中的此演示页面，页面底部有一个下拉列表，打开时无法正常工作

---

这个问题与这个问题有关实际上，你的问题与这个问题有关：

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

iScroll使用CSS转换来移动可滚动区域，看起来Safari的行为因选择而被破坏——它没有注意到转换，认为选择不在视图中，并滚动其可滚动容器以使其再次可见，而不考虑转换，从而使其不在视图中

这从根本上说是一个iOS错误，应该由受此问题影响的尽可能多的web开发人员来解决！解决方案可以在iScroll内部最有效地实现，因此我鼓励您向其开发人员报告这个问题

也就是说，我想出了一个解决办法，你可以在这个答案的底部找到。您可以将其与您的iScroll实例一起调用一次：

workAroundiScrollSelectPositioning(myScroll);

jsbin粘贴中有一个实时演示。它在选择获得焦点时触发，并执行三项操作：

记住滚动位置，并告诉iScroll立即滚动到左上角删除任何变换，并将滚动区域的顶部和左侧CSS属性设置为当前滚动位置。从视觉上看，一切看起来都一样，但滚动区域现在的定位方式与Safari相同

阻止iScroll看到任何触摸这很难看，但它阻止了iScroll在重新定位滚动区域时对其应用变换

当“选择”失去焦点时，将所有内容恢复到原来的状态，恢复原始位置，变换并停止锁定

还有一些情况下，元素的位置可能会出错，例如，当文本区域有焦点但仅部分在视图中时，您键入并使Safari尝试将其余部分显示在视图中，但最好在iScroll中进行修复

---

假设您希望在用户单击textfield时显示下拉列表，则可以在该位置使用自定义表视图。

---

因此，当用户在textfield上单击时，委托方法被称为TextFieldBeginEditing，并在其中创建一个小表视图。这看起来像是一个下拉列表…

这是一个修改过的函数工作区，对我来说很有用

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);}

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);}