Question

我见过this question，但没有回答。

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

这在带有鼠标的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来只监听certian事件。这是我的初始化函数（可能更容易通过上面的链接阅读）：

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

非常感谢任何帮助。提前致谢

通过scrollTo垂直滚动在移动设备上抖动

0 个答案: