滾動不使用溢出的div

Question

我遇到了一個不太獨特的問題。 當前正在使用Google Maps API信息框。 如果在此信息框上設置了特定標志，則會禁用滾動。 我需要設置此標志，並且似乎無法動態更改它。

解決此問題的唯一方法可能是使用純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"); 。

這里的工作演示：

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);
    }
}

資源