是否可以在 Chrome for Android 中滚动 div？答案

【问题标题】：Is it possible to scroll divs in Chrome for Android?是否可以在 Chrome for Android 中滚动 div？
【发布时间】：2012-01-11 02:48:57
【问题描述】：

Here is a chunk of text inside a scrollable div.

我可以在 Mac 版 Chrome 中用两根手指滚动它。我可以在 iPad 上用一根手指滚动它。但是，我找不到任何方法在 Chrome for Android 中滚动它。

也许有一个使用触摸 API 的解决方法？

【问题讨论】：

标签： android google-chrome browser

【解决方案1】：

3.0 之前的所有 android 版本都存在溢出漏洞：滚动或自动 (bug info)。

对于那些使用 jQuery 的人来说，这里是一个快速修复：

function touchScroll(selector){
      var scrollStartPos = 0;
      $(selector).live('touchstart', function(event) {
        scrollStartPos = this.scrollTop + event.originalEvent.touches[0].pageY;
      });
      $(selector).live('touchmove', function(event) {
        this.scrollTop = scrollStartPos - event.originalEvent.touches[0].pageY;
      });
}

然后如果使用modernizr：

if (Modernizr.touch) {
    touchScroll($('.myScrollableContent'))
}

但这并不理想，因为所有可触摸的设备都会有这个。

如果您使用 Phonegap，您可以这样做（在 phonegap 启动后的某个地方）：

if (window.device && device.platform=="Android" && parseInt(device.version) < 3){
    touchScroll($('.myScrollableContent'))
}

【讨论】：

要使可点击链接等在可滚动内容中起作用，您需要从touchstart 事件中删除event.preventDefault();。
这是真的！感谢您指出了这一点。我正在从我的答案中删除它。

【解决方案2】：

Android 版 Chrome 的另一个快速修复 (http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/)

首先创建一个函数来检查它是否是一个触摸设备...

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

然后函数使 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);
  }
}

...调用传递元素id的函数

touchScroll("divIdName");

【讨论】：

【解决方案3】：

在浏览有关此问题的错误报告时，我发现 this JavaScript library 使用触摸事件解决了该问题。据报道，它已在 Honeycomb 中修复，因此希望该修复能够在人们推出 Ice Cream Sandwich 的构建后立即受到影响。

【讨论】：