Question

Here is a chunk of text inside a scrollable div.

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

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

Answer 1

Chrome for Android的另一个快速解决方法（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");

Answer 2

在浏览有关此问题的错误报告时，我发现this JavaScript library可以解决使用触摸事件的问题。据报道它也被固定在Honeycomb中，所以希望这个解决方案能够在他们推出冰淇淋三明治时立刻引起人们的注意。

Answer 3

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，您可以（在电话间隙之后的某个地方）：

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

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

3 个答案: