滾動div不使用溢出

Question

我有一個沒有如此獨特的問題，我遇到了。目前正在使用Google Maps API InfoBox。如果此信息框中設置了特定標誌，則滾動功能將被禁用。我需要設置此標誌，似乎沒有辦法動態更改它。

解決此問題的唯一方法可能是使用純JavaScript的滾動功能。標準的CSS將是：

-webkit-overflow-scrolling: touch; 

但是，這不符合上述標誌。我也嘗試了一些JavaScript庫，但它們看起來只是標準CSS滾動的漂亮版本。

有誰知道一個庫只使用JavaScript滾動div？

答案

function touchScroll(id){ 
    // if(isTouchDevice()){ //if touch events exist... 
     var el=document.getElementById(id); 
     var scrollStartPos=0; 

     document.getElementById(id).addEventListener("touchstart", function(event) { 
      scrollStartPos=this.scrollTop+event.touches[0].pageY; 
      event.preventDefault(); 
     },false); 

     document.getElementById(id).addEventListener("touchmove", function(event) { 
      this.scrollTop=scrollStartPos-event.touches[0].pageY; 
      event.preventDefault(); 
     },false); 
    // } 
} 

Answer 1

這個函數調用isTouchDevice()功能，如果它成功了一個特殊的觸摸事件被附加到頁面。首先，當一個觸摸事件開始時（touchstart事件），它獲取當前滾動位置並阻止默認瀏覽器行爲，在這種情況下將滾動頁面。接下來，當手指移動時，將調用touchmove事件。在這裏，手指的位置從之前保存的滾動位置減去，並再次阻止頁面滾動。

function isTouchDevice(){ 
    try{ 
     document.createEvent("TouchEvent"); 
     return true; 
    }catch(e){ 
     return false; 
    } 
} 

所以這是它，只是包括您的網頁上這些功能，只是通過傳遞要滾動元素的ID調用它。像這樣：touchScroll("MyElement");。

working demo here:

function touchScroll(id){ 
    if(isTouchDevice()){ //if touch events exist... 
     var el=document.getElementById(id); 
     var scrollStartPos=0; 

     document.getElementById(id).addEventListener("touchstart", function(event) { 
      scrollStartPos=this.scrollTop+event.touches[0].pageY; 
      event.preventDefault(); 
     },false); 

     document.getElementById(id).addEventListener("touchmove", function(event) { 
      this.scrollTop=scrollStartPos-event.touches[0].pageY; 
      event.preventDefault(); 
     },false); 
    } 
} 

source