3

我见过这个问题，但没有得到回答。

我在网页上有一个对象，我希望您能够拖动和滚动页面。这背后的原因是我将其设置为可滑动的窗口，但在某些移动设备上，该窗口占据了大部分屏幕。因此，除了水平“滑动”之外，我还希望您能够垂直滚动页面。

这在带有鼠标的 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

相关的 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;
}

如您所见，我所做的只是滚动当前和先前“移动”事件的 Y 值差异。同样，这就像计算机上的冠军一样，这正是我不在乎它是否有效的地方。唯一的问题是我尝试过的每台移动设备。

我正在使用 preventDefault() （或者如果我不能这样做，则设置返回值 = false），但我是否会触发另一个事件而不知道它？我尝试使用我的 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