3

この質問を見ましたが、回答がありませんでした。

Web ページにオブジェクトがあり、ページをドラッグしてスクロールできるようにしたいと考えています。この背後にある理由は、スワイプ可能なウィンドウになるように設定したためですが、一部のモバイル デバイスではウィンドウが画面の大部分を占めています。ですから、横方向の「スワイプ」に加えて、ページを縦方向にもスクロールできるようにしてほしいです。

これは、マウスを備えた PC でうまく機能します。すべてがスムーズで、期待どおりです。ただし、モバイル デバイスに移動すると (iPhone の Safari と Android 4 のネイティブ ブラウザーで試してみましたが、どちらも同じ問題があります)、垂直スクロールは非常に「ジッタリング」します。

最初は、ページをスクロールした後、次の touchmove / MSPointerMove イベントが、(スクロールのために) 指が動いていなくても、異なる Ycord を返すという事実に関係していると考えていました。しかし、これに適応しようとしても役に立ちませんでした。

いずれにせよ、全体のデモはhttp://www.leecolpi.com/NEW/m/にあります 。完全な JavaScript はhttp://www.leecolpi.com/NEW/m/JAVASCRIPT/slide_windowにあります。 .js

Relivant の JavaScript は次のとおりです (上のリンクから読みやすいかもしれません)。

function mouseMoveTrigger(evt)
{
  if (!isDragging) return;

  if (!touchEvents && !pointerEvents)
    if (window.event) evt=window.event;

  if (evt.preventDefault)
    evt.preventDefault();
  else
    evt.returnValue = false;

  var newX;
  var newY;
  if (touchEvents)
  {
    newX = offsetX - evt.changedTouches[0].pageX;
    offsetX = evt.changedTouches[0].pageX;
    newY = offsetY - evt.changedTouches[0].pageY;
    offsetY = evt.changedTouches[0].pageY;
  }
  else
  {
    newX = offsetX - evt.clientX;
    offsetX = evt.clientX;
    newY = offsetY - evt.clientY;
    offsetY = evt.clientY;
  }

  var thingsToSlide = document.getElementById("pictureFrame").getElementsByTagName("li");
  newX = parseInt(thingsToSlide[0].style.right.replace(/px/g,'')) + newX;

  if (newX < 0)
    newX = 0;
  if (newX > ((thingsToSlide[0].offsetWidth * (thingsToSlide.length - 1))) + 30)
    newX = (thingsToSlide[0].offsetWidth * (thingsToSlide.length - 1)) + 30;

  window.scrollBy(0, newY);

  for (var i=0; i<thingsToSlide.length; i++)
    thingsToSlide[i].style.right = newX + "px";

  return false;
}

ご覧のとおり、私が行っているのは、現在と前の「移動」イベントの Yvalue の差の scrollBy だけです。繰り返しますが、これはコンピューターのチャンピオンのように機能しますが、機能するかどうかはまったく気にしません。唯一の問題は、私が試したすべてのモバイルデバイスです。

preventDefault() を使用しています (または、それができない場合は戻り値を false に設定しています) が、別のイベントをトリガーしていて、それを知らない可能性がありますか? 特定のイベントのみをリッスンするように init を試しました。これが私のinit関数です（上記のリンクから読みやすいかもしれません）：

function initSlider()
{
  var pageBody = document.getElementsByTagName("body")[0];
  var thingsToSlide = document.getElementById("pictureFrame");
  if (thingsToSlide)
  {
    var thingsToSlideList = document.getElementById("pictureFrame").getElementsByTagName("li");
    for (var i=0; i<thingsToSlideList.length; i++)
      thingsToSlideList[i].style.right = "0px";

    if (touchEvents)
    {
      thingsToSlide.addEventListener("touchstart", onTouchStart, false);
    }
    else if (pointerEvents)
    {
      thingsToSlide.addEventListener("MSPointerDown", onTouchStart, false);
    }
    else
    {
      thingsToSlide.ondrag=function() { return false; };
      thingsToSlide.onselectstart=function() { return false; };
      thingsToSlide.onmousedown=function(event) { mouseDownTrigger(this,event); };
    }

    if (touchEvents)
    {
      pageBody.addEventListener("touchmove", mouseMoveTrigger, false);
      pageBody.addEventListener("touchend", mouseUpTrigger, false);
      pageBody.addEventListener("touchcancle", mouseUpTrigger, false);
    }
    else if (pointerEvents)
    {
      pageBody.addEventListener("MSPointerMove", mouseMoveTrigger, false);
      pageBody.addEventListener("MSPointerUp", mouseUpTrigger, false);
      pageBody.addEventListener("MSPointerCancel", mouseUpTrigger, false);
    }
    else
    {
      document.onmousemove = mouseMoveTrigger;
      document.onmouseup = mouseUpTrigger;
    }
  }
}

どんな助けでも大歓迎です。前もって感謝します

4

0 に答える 0