繁体   English   中英

<select>使用iScroll4脚本在iphone浏览器中下拉闪烁

[英]<select> drop down flashing on focus in iphone browser with iScroll4 script

请参阅页面底部的iphone http://jsbin.com/unese4/8中的此演示页面,其中有一个下拉列表打开但无法正常工作。

此问题与此问题有关iScroll 4无法使用表单<select>元素iPhone Safari和Android浏览器

实际上,您的问题与此问题有关:

使用select元素在safari上进行webkit-transform问题

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

iScroll使用CSS变换来移动可滚动区域,看起来Safari的行为因为select s而被破坏 - 它没有注意到变换,认为select不在视图中,并且将其容器( #scrollable )滚动到让它可见(再次,不考虑变换),这使它远离视野。

这基本上是一个iOS错误,应该由受此问题影响的许多Web开发人员向Apple报告 可以在iScroll内部最有效地实施解决方法,因此我建议您向其开发人员报告该问题。

也就是说,我已经提出了一个解决方法,你可以在这个答案的底部找到。 您可以通过使用iScroll实例调用它一次来使用它:

workAroundiScrollSelectPositioning(myScroll);

现场演示为您jsbin贴在这里 它会在select获得焦点时触发,并执行以下三项操作:

  1. 记住滚动位置,并告诉iScroll立即滚动到左上角(删除任何变换),并将滚动区域的topleft CSS属性设置为当前滚动位置。 在视觉上,一切看起来都一样,但滚动区域现在以Safari将看到的方式定位。

  2. 阻止iScroll看到任何触摸(这很难看,但它会阻止iScroll在滚动区域应用转换时重新定位)。

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

您可以在该位置使用自定义表视图,假设您想在用户单击文本字段时显示下拉列表。 所以当用户clcik在textfield上时,委托方法会调用TextFieldBeginEditing并在里面创建一个小表视图。 看起来像一个下拉列表......

这是修改过的函数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);}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM