在桌面上向下滚动三个js动画，而不是在手机上

Divs over a three js animation scrolling down on desktop but not on mobile?

本文关键字：动画 js 手机 三个 桌面 滚动      更新时间：2024-02-17

我在文档主体中有一个Three-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 );

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

可以在桌面上向下滚动支架div，并在背景动画保持不变的情况下显示更多文本。

但是支架div在移动设备上没有触摸响应，因此无法向上滑动任何文本。

添加以下函数：

function onDocumentTouchStart() {
  var theholder = document.getElementById("holder");
  theholder.addEventListener( 'touchstart', onDocumentTouchStart, false );
}
function onDocumentTouchMove() {
  var theholder = document.getElementById("holder");
  theholder.addEventListener( 'touchmove', onDocumentTouchMove, false );
}
相关文章：