Question

我需要一些小问题的帮助，我似乎无法抓住：

当我触摸一个角色（很多角色 - >很多跨度）时，我的屏幕底部会显示跨度。在这个范围内有关于角色的一些信息 - 因为我想让它具有移动友好性，我希望用户滚动浏览这些信息。

到目前为止，我找到了一些帮助我一点点的代码：

<body onload="touchScroll('test')">
<script>
function isTouchDevice(){
try{
    document.createEvent("TouchEvent");
    return true;
    }catch(e){
    return false;
   }
}

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为“test”的跨度变为可滚动。大。但是由于我有数百个跨度，我不能为每个单独分配一个id。所以我想知道你是否可以帮助想出一个让每个课程“tt”可滚动的方法。

我尝试将“test”-id重新分配给触摸时的下一个元素。但那没用。我尝试将“test”-id添加到每个类“tt” - 也没有用。

如果您想让自己了解情况：Here's my testsite！

Answer 1

我在评论中找到了this site的解决方案：

<script type='text/javascript'>
// Determine if this is a touch device
var hasTouch = 'ontouchstart' in document.documentElement,
startEvent = hasTouch ? 'touchstart' : 'mouseover',
moveEvent = hasTouch ? 'touchmove' : 'mousemove',
endEvent = hasTouch ? 'touchend' : 'mouseup';

var Last;

$(".tttw").live(startEvent, function() {
if (Last) Last.removeClass('ttth');
$(this).addClass("ttth");
Last=$(this);
}); 

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

function touchScroll(selector) {
if (isTouchDevice()) {
  var scrollStartPosY=0;
  var scrollStartPosX=0;
  $('body').delegate(selector, 'touchstart', function(e) {
    scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
    scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
  });
  $('body').delegate(selector, 'touchmove', function(e) {
    if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
      this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||
      (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
          e.preventDefault();
    if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
      this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||
      (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
          e.preventDefault();
    this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
    this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
  });
}
}


$(document).ready(function(){
touchScroll('.tt');
});

</script>

现在像魅力一样工作; - ）

在android上创建绝对定位的span / div可滚动 - 多个span / div

1 个答案: