<select>使用iScroll4腳本在iphone瀏覽器中下拉閃爍

Question

請參閱頁面底部的iphone http://jsbin.com/unese4/8中的此演示頁面，其中有一個下拉列表打開但無法正常工作。

此問題與此問題有關iScroll 4無法使用表單<select>元素iPhone Safari和Android瀏覽器

Answer 1

實際上，您的問題與此問題有關：

使用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立即滾動到左上角（刪除任何變換），並將滾動區域的top和left 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);
}

Answer 2

您可以在該位置使用自定義表視圖，假設您想在用戶單擊文本字段時顯示下拉列表。 所以當用戶clcik在textfield上時，委托方法會調用TextFieldBeginEditing並在里面創建一個小表視圖。 看起來像一個下拉列表......

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