iScroll不會讓項目被點擊

Question

我正在使用iScroll4 ，它工作得很好！

這是我用來初始化，刷新和結束iScroll的函數：

function iniciarIscroll(){
    /*En ie7 no lo usamos*/
    if(!ie7){
        $(document).ready(function() {
            myScroll1 = new iScroll('nvl1');
            myScroll2 =new iScroll('nvl2');
            /*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);*/
        });
    }
    return false;
}

function refrescarIscroll(){
    if(!ie7){
        myScroll1.refresh();
        myScroll2.refresh();
    }
    return false;
}


function terminarIscroll(){
    if(!ie7){
        myScroll1.destroy();
        myScroll1 = null;
        myScroll2.destroy();
        myScroll2 = null;
    }
    return false;
}

問題是它不會讓<a>或<input>或任何東西被點擊（或集中，我不確定）; 還有css：hover或：不會應用焦點; 但它會在javascript中觸發事件

.hover() or .click()

如果可能，任何想法如何解決這個問題？

Answer 1

您只需要在iscroll的加載器中進行此更改：

改變這一行：

myScroll = new iScroll('wrapper');

為了這：

myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});

Answer 2

  // Setup myScroll
  myScroll = new IScroll('#wrapper', {
    scrollX: horizontalSwipe,
    scrollY: !horizontalSwipe,
    momentum: false,
    snap: document.querySelectorAll('#scroller .slide'),
    snapSpeed: 400,
    bounceEasing: 'back',
    keyBindings: true,
    click: true
  });

對我來說，我只需要在最后一行添加click：true ...花了一整天調試並實現所有建議的解決方案無濟於事...

Answer 3

作者評論說表單兼容性很不好 - 這是一個已知的問題，他正在為下一個版本修復。 其他人在論壇中發表評論：

從v4.1.9開始，對表單字段的支持仍在開發中。 您可以通過包裝標簽來使單選按鈕和復選框工作（包裝似乎比使用for =“”語法更好地工作）。

鏈接應該沒問題，並在提供的演示中工作。 您已經在init腳本中注釋掉了e.preventDefault()調用，這是通常的罪魁禍首。 也許表單兼容性問題也會影響鏈接？

至於懸停事件，我可以告訴你，當點擊一個元素時應該激活它。

希望有所幫助。 最糟糕的情況 - 廢棄您的代碼並從項目的演示頁開始，一次適應您的需求並繼續測試。 您很快就會知道哪個修改會破壞預期的行為。

Answer 4

我曾經使用的一種解決方法是當我希望用戶能夠進行編輯時“凍結”iscroll。 iScroll與輸入的不兼容性是相關的，因為我可以告訴css轉換結合它應用於滾動條中的內容的觸摸支持。 如果暫時禁用滾動條，則可以允許用戶輸入值。 訣竅是確保在禁用時保留內容的當前滾動位置。 當“凍結”時，用戶可以更新可見區域內的輸入。 缺點是在此狀態下滾動條不會滾動。 你必須在某些事件上解凍它。

我將這些函數添加到iScroll.prototype中以使其工作：

_get_current_scroll_px: function (transformStyle) {
    //return the first string that looks like an integer, that should be the x translation
    return /[\-0-9]+px/.exec(transformStyle)[0];
},


freeze: function () {
    this.disable();
    this.savedStyle = this.scroller.style[vendor + 'Transform'];
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller
    this.scroller.style[vendor + 'Transform'] = '';
},

thaw: function () {
    this.scroller.style[vendor + 'Transform'] = this.savedStyle;
    this.scroller.style['marginLeft'] = '0';
    this.enable();
}

調用或凍結它看起來像：

//user triggered event causes freeze
yourFreezeEventCallback: function () { 
    myScroll1.freeze();
    //now user can use visible inputs on screen
}

解凍它看起來像：

//user triggered event causes thaw
yourThawEventCallback: function () { 
    myScroll1.thaw();
    //now scrolling is back and inputs can no longer be edited or in focus
}

顯然，你需要以某種方式將它集成到你自己的項目中，但它對我有用。 它並不理想，所以我期待iScroll的更新。 警告：這不是在IE中測試的，因此我不會在那里擔保。 我希望這至少是一個幫助你解決問題的開始。

Answer 5

當我第一次發現iScroll時，我認為這是解決我的許多問題的方法。 然后這個問題讓我很開心。 在嘗試找到解決方法時，我想出了這個拉取請求 。

拉動請求上有一個注釋，雖然我不確定哪個拉取請求/應該解決問題，但已找到另一個更好的解決方案。 我會看看是否可以從該筆記的作者那里獲得更詳細的信息。

更新：可在此處找到相關的拉取請求。 我還沒有機會測試它（我希望今天晚些時候確認Android支持。）

Answer 6

Android瀏覽器錯誤是Android內部非常舊版本的WebKit的結果，甚至在Android 4.3中也是如此。 錯誤的根本原因 - 錯誤處理iScroll發送回瀏覽器的點擊事件（刪除preventDefault只是停止發送此點擊事件）Android Chrome瀏覽器沒有此錯誤，因為它已經升級了WebKit庫。

正在等待從谷歌升級Android WebKit。

Answer 7

評論出來

position:absolute;

在styles.css #pageWrapper styles.css

就我而言，這解決了上述無法解決的問題。

Answer 8

試試這個

myScroll = new IScroll('#wrapper', { click: true });

Answer 9

我也一直在努力使事物在移動環境中平滑滾動，iscroll是我在尋找合適工具時考慮的庫之一。 其他答案已經建議你如何解決你的具體問題但我實際上建議使用可滾動性 （由Joe Hewitt）或touchscroll （由David Aurelio提供）。 我認為可滾動性實際上提供了最好的感覺，但它並沒有真正完成，你最終會遇到相同或類似的問題。 我個人使用touchscroll進行我的項目，我推薦它。

我幾周前在我的項目中嘗試使用iscroll時，我不得不進行自定義點擊操作和超時檢查，我通過在觸摸開始時注釋e.preventDefault（）並插入一些我自己的函數來實現當它實際滾動時捕獲。 從本質上講，這些庫都以相同的方式工作（捕獲事件並阻止它們，運行css轉換使得比DOM重繪動畫更平滑，然后人工觸發應該觸發的任何事件）。 這意味着您可以修復它的另一種方法是查找特定元素的點擊事件何時發生，並在代碼中手動觸發。 在touchscroll中，它會偵聽最上層元素上的事件，因此您可以通過簡單地停止冒泡來覆蓋行為......我不記得iscroll是否也這樣做。

這種（流暢的，原生的感覺，移動中的動畫）仍然是處於各種技術邊緣的領域，因此沒有人擁有完整的解決方案。 我希望在幾年內，移動設備可以改進，以便移動瀏覽器無論如何都只能處理滾動事件，但在此之前，我們不得不將這些解決方案整合在一起。 祝好運！