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

滚动不使用溢出的div

1 个答案: