javascript - 滚动不使用溢出的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