在iPad應用上動態滾動的問題

Question

在我的頁面上，我有兩個面板，其中左側面板包含堆疊在一起的項目列表，當我單擊/選擇其中一個項目時，有關所選項目的更多信息顯示在右側面板中。我需要合適的面板是滾動到下面這個面板滾動所以增加了本地般的氣勢 -

#rightPanel { 
    position:absolute; 
    top:50px; 
    height:400px; 
    width:500px; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

要通過項目的左側面板列表中移動，我已經添加了一個手指輕掃。它工作正常，但是當我滑動下一個項目時，右側面板已經滾動，這是不希望的。爲了解決這個問題，增加了這個小例程，它在每次刷卡時將rightPanel內容滾動回頂端，但是存在相當多的延遲，這使得它感覺像內容緩慢加載。

var scrollStopper = function() { 
if ((swipe == 'right') || (swipe == 'left')) 
    document.getElementById("rightPanel").scrollTop = 0; 

document.getElementById('rightPanel').addEventListener('scroll', scrollStopper); 

現在沒有動力滾動事情按預期工作。有關如何在每次滑動時將右側面板滾動回頂部而不會導致延遲的任何想法？

Answer 1

你可能會從你的UI具有更快的響應：

document.getElementById('leftPanel').addEventListener('touchstart', scrollStopper); 

應該意味着，只要用戶與左側面板交互的右側面板將捕捉其滾動。

Answer 2

發生這種情況是因爲在iOS上的Safari上，scroll事件只會在滾動結束時觸發（這意味着當您的手指在屏幕上完成移動時）。

類似的問題已經在這裏找到答案：javascript scroll event for iPhone/iPad?

或者，你可以嘗試使用touchSwipe plugin檢測刷卡的方向和持續時間，並儘快刷卡充滿了期望treshold運行功能。

這裏我火10px的的距離後的功能（可能更高treshold應該，因爲這可以用來觸發真快 - 已在最小的手指移動 - 而應該ilustrate邏輯罰款）：

$(document).swipe(
    { 
     // touchSwipe handler triggered for every phase of the swipe. This handler is constantly fired for the duration of the pinch. This is triggered regardless of swipe thresholds. 
     swipeStatus: function (event, phase, direction, distance, duration, fingers) 
     { 
      // check if we swiped more than 10px to the left 
      if (distance > 10 && direction == 'left') { 
       document.getElementById("rightPanel").scrollTop = 0; 
      } 
      // check if we swiped more than 10px to the right     
      else if (distance > 10 && direction == 'right') 
      { 
       document.getElementById("rightPanel").scrollTop = 0; 
      } 
     } 
    } 
); 

然而，由於我只在iPad上測試過，所以不能說這真的是無懈可擊 - 我相信它仍然需要微調，並且如果使用插件不是一個選項，您總是可以使用相同的代碼邏輯將檢測剝離爲裸露的JavaScript 。

現場採樣 - 也包括向上和向下滑動事件：

http://easwee.net/code-samples/touch-swipe-instant/

（改變上刷卡顏色 - 紅色=左側，藍色=右，綠=起來，橙=向下）

Answer 3

要保持ios上的本地滾動活動，請將要滾動的元素放置在父元素具有溢出CSS的子元素中。

Answer 4

如果你喜歡我在這裏實現瞭解決方案：

http://proton.orangehilldev.com/documentation.html

CSS的部分不是那麼複雜，你可以用瀏覽器檢查檢查或後來我纔可以發佈，如果你找不出它出於你自己。至於JS，這是我用過的：

// Disables scroll except for allowed elements that prevent touchmove event propagation 
    $(document).on('touchmove', function(event){ 
     event.preventDefault(); 
    }); 
    // Elements which are allowed touchmove event (by stopping event propagation to document) 
    $('body').on('touchmove','.scrollable, nav', function(event) { 
     event.stopPropagation(); 
    }); 
    // Prevents scrollable elements from ever reaching the end of scroll, and thus prevents scroll overflow on ipad 
    $('body').on('touchstart','.scrollable', function(event) { 
     if (event.currentTarget.scrollTop === 0) { 
      event.currentTarget.scrollTop = 1; 
     } 
     else if (event.currentTarget.scrollHeight === event.currentTarget.scrollTop + event.currentTarget.offsetHeight) { 
      event.currentTarget.scrollTop -= 1; 
     } 
    });