使用-webkit溢出滾動時的當前滾動位置：touch - Safari iOS JavaScript事件（scrollTop/scrollLeft）

我正在使用-webkit-overflow-scrolling：touch使分區溢出：scroll;通過iOS touch事件平滑滾動。使用-webkit溢出滾動時的當前滾動位置：touch - Safari iOS JavaScript事件（scrollTop/scrollLeft）

它出色地工作，除了在滾動時似乎沒有更新element.scrollTop或element.scrollLeft。它只會更新element.scrollTop /當動量用完並且停止時觸發滾動事件。

有沒有人知道找到它當前的滾動位置的方法，如果有一個事件我可以聽？我想知道是否可以通過CSS3屬性找到它？

<!DOCTYPE html> 
<body> 
    <div id="display_a">Scroll is: 0</div> 
    <div id="display_b">Scroll is: 0</div> 
    <div id="element" style="width:800px;overflow-x:scroll;-webkit-overflow-scrolling:touch;"> 
     <div style="font-size:100px;width:1850px;"> 
      a b c d e f g h i j k l m n o p q r s t u v w x y z 
     </div> 
    </div> 
    <script> 
     var e = document.getElementById("element"); 
     var display_a = document.getElementById("display_a"); 
     var display_b = document.getElementById("display_b"); 
     e.addEventListener("scroll",function(event){display_a.innerHTML = "Scroll is: " + event.target.scrollLeft;}); 
     setInterval(function(){display_b.innerHTML = "Scroll is: " + e.scrollLeft;},100); 
    </script> 
</body> 
</html>

============ UPDATE ============

的iOS：下面示出了兩個嘗試感謝

實施例8已經排序了這種行爲。滾動事件現在在滾動時觸發。

請注意，您現在必須在反彈滾動期間處理負向滾動值。

來源

2011-12-17 Jamie G

只是想向所有迄今爲止貢獻的人表示非常感謝，我擔心我們不會找到完美的解決方案，但下面有一些很好的建議。 – 2013-03-21 17:17:08

iOS上的第三方瀏覽器仍然存在問題> 8.x – Thomas 2015-06-14 19:18:57

滾動事件不會在主屏幕上的webapps或UIWebView中觸發 – MachineElf 2016-05-02 14:08:54

iOS開發人員庫，有在Safari的準則關於它的解釋：

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

基本上，滾動事件流是這樣的：觸摸/開始拖動（鼠標滾輪事件） - >平移/移動（無事件） - >停止（onscroll）

因此，沒有什麼事情像滾動觸發的連續事件發生時，只有一個onScroll在手勢結束時發生。

如果你發現一個可選的方式來實現這一點，讓我知道:)

來源

2011-12-22 17:18:12 pixshatterer

恐怕我還沒有接近這個，但是一定會讓大家知道當我找到解決方案。謝謝大家。 – 2012-01-23 12:46:29

這可能會有幫助。這是一個jQuery解決方案，我正在使用強制分頁IOS側向滑動。這與你工作的情況不完全一樣。我正在使用「overflow-scrolling：auto」，它的行爲不像「touch」版本。

#yourDiv { 
    -webkit-overflow-scrolling: auto; 
    overflow:auto; 
}

我使用「overflow-scrolling：auto」，因爲它對觸發事件反應更快。 Unfortunatley，「溢出滾動：觸摸」確實似乎在運動時阻止JavaScript和CSS動畫。但是至少在滾動過程中你可以得到一些位置信息。

var pageSwiping = false; 

$('#yourDiv').on('scroll', function(e) { 
    if (pageSwiping !== true ) { 
     pageSwiping = true; 
     var offset = $('#'+e.target.id).scrollLeft(); 
     $('#yourDiv').one('touchend',{elem:e.target.id,dragStart:offset},divMove); 
    }; 
}); 

var divMove = function(e) { 
    pageSwiping = false; 
    var elem = e.data.elem; 
    var dragEnd = $('#'+elem).scrollLeft(); 
    var dragDelta = (dragEnd - e.data.dragStart) 
     // Make page-alignment decisions based on dragDelta 
};

來源

2012-01-09 14:14:12 mattsahr

嗨馬特，剛拿起這個答案。這是一個可能的解決方案，但我喜歡原生iOS滾動的感覺，所以我真的希望保持這一點（不要試圖複製iOS做得很好的阻力代碼）。雖然謝謝！ – 2012-01-23 12:46:22

-1

如果有幫助，scrollTop的和scrollLeft在實時的TouchMove事件處理程序中更新：

$(function() 
{ 
    var $div = $("#scroll") 
    var $p = $("#display"); 

    var update = function(e) 
    { 
     $p.text(e.type +": "+ $div.scrollLeft() +", "+ $div.scrollTop()); 
    } 

    $div.bind("touchmove", update) 
     .bind("scroll", update); 
});

來源

2012-04-09 01:44:11

需要注意的是，如果您希望將此元素保持靜態顯示在屏幕上，請將位置固定CSS引入iOS 5. – 2012-04-09 02:05:00

此處假設jQuery依賴關係 – donohoe 2013-07-24 03:05:40

JQuery用於簡短的工作演示;沒有它，scrollTop，scrollLeft和touchmove是標準的。 – 2014-02-12 00:24:31

在類似情況下，我使用scrollability.js，它做了非常好的工作模擬本地滾動行爲。然後，我正在監聽'scrollability-start'事件並監視滾動元素的頂部/左側屬性。我知道這並不理想，但它是一個不錯的選擇。

來源

2012-04-23 20:33:15 spacehelmetboy

我不得不說，它確實做了很好的模擬iOS風格滾動的工作！我肯定會在某個時候適當看待。感謝您的建議 – 2012-04-24 06:09:32

也看看[iScroll]（http://cubiq.org/iscroll-4），它做同樣的事情，但我發現更多的有用，因爲像scrollTo（）和scrollToElement（）方法。 – spacehelmetboy 2012-04-24 21:37:11

我所知道的是奇怪的，但你可以通過註冊touchstart事件跟蹤scrollLeft/scrollTop的的：

e.addEventListener("touchstart",function(event){});

來源

2013-02-19 09:38:38 David

感謝大衛，但當然，這並沒有幫助你在觸摸屏的手指後，它只是保持滾動的勢頭。或者我錯過了什麼？ – 2013-03-13 19:05:52

你是對的，我現在面臨同樣的問題。 – David 2013-03-21 12:58:41

獲取水平滾動條的位置，同時srolling（通過CSS溢出-Y：滾動）

$('#myNode').bind('scroll', function(e){ 
    var myPos = e.target.scrollLeft; 
    // do something with myPos but don't naughty 
})

來源

2013-03-13 15:03:14 flunder

這假設jQuery依賴 – donohoe 2013-07-24 03:05:23

這裏是我的倉庫，我已經添加了回調onScrolling()讓我知道什麼時候勢頭滾動動畫在animate()發生：https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js

我做了使用他的建議在這裏的示例應用：http://jsfiddle.net/simpleshadow/wQQEM/22/

@ Github上robertlawson86提出這個建議，以幫助提供有關何時在氣勢滾動搶位置的想法。請參閱示例和討論：https://github.com/cubiq/iscroll/issues/183

來源

2013-04-02 08:08:02 Corey

使用-webkit溢出滾動時的當前滾動位置：touch - Safari iOS JavaScript事件（scrollTop/scrollLeft）

回答

相關問題