0

我需要帮助解决一个我似乎无法掌握的小问题：

当我触摸一个字符（很多字符 -> 很多跨度）时，屏幕底部会显示跨度。在跨度中是有关角色的一些信息 - 因为我想让它适合移动设备，所以我希望用户滚动浏览这些信息。

到目前为止，我发现了一些对我有帮助的代码：

<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” - 也没有工作。

如果您想让自己了解情况：这是我的测试站点！

4

1 回答 1

0

我在评论中在这个网站上找到了一个解决方案：

<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>

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

于 2012-10-27T08:41:05.567 回答