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 に答える