javascript - 在桌面上向下滚动但不是在移动设备上向下滚动的三个 js 动画？

Question

我在文档正文中有一个三个js动画:

container = document.createElement( 'div' );
document.body.appendChild( container );

还有两个 div 在顶部设置:

#holder {
  z-index: 1;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

#sitearea {
  width: 1000px;
  margin: 0 auto;
}

也是一个媒体查询:

@media screen and (max-width: 1000px) {
  #sitearea {
    width: 100%;
  }
}

动画是交互式的:

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );

在桌面上，动画响应鼠标移动，在移动设备上响应触摸。

可以在桌面上向下滚动 holder div 并调出更多文本，同时背景动画保持原位。

但是 holder div 在移动设备上没有触摸响应，因此不能向上滑动任何文本。

Answer 1

添加这些函数:

function onDocumentTouchStart() {
  var theholder = document.getElementById("holder");
  theholder.addEventListener( 'touchstart', onDocumentTouchStart, false );
}

function onDocumentTouchMove() {
  var theholder = document.getElementById("holder");
  theholder.addEventListener( 'touchmove', onDocumentTouchMove, false );
}