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

7

其實，你的問題涉及到這樣一個問題：當輸入增益專注於iOS的Safari瀏覽器，它會檢查

webkit-transform issue on safari using select elements

如果輸入是可見的。如果不是，則Safari會強制滾動文檔以及包含輸入的元素，以使其可見。

iScroll使用CSS轉換來移動可滾動區域，它看起來像Safari的行爲被破壞了select s - 它沒有注意到轉換，認爲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); 
}

來源

2011-05-02 02:58:13 s4y

2

你可以在那個地方使用自定義表視圖，假設你想顯示下拉列表時，在文本框的用戶點擊。因此，當用戶在文本字段上調用委託方法時，會調用TextFieldBeginEditing，並在裏面創建一個小表視圖。看起來像一個下拉列表...

來源

2011-05-04 04:49:03

1

這是修改後的函數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);}

來源

2012-04-05 18:56:18 one

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

回答

相關問題