移动端如何实现子 div 在父 div 内任意滑动查看

在移动端开发中，实现子 div 在父 div 内任意滑动查看是一个常见需求。这一功能能够有效提升用户体验，让页面信息展示更加灵活。那么，具体该如何实现呢？

我们需要使用 CSS 来设置父 div 和子 div 的基本样式。对于父 div，要设置固定的宽度和高度，并且将 overflow 属性设置为 hidden，这是为了隐藏超出父 div 范围的子 div 内容。例如：

.parent {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

子 div 的宽度和高度则根据实际内容来确定，同时要将其定位设置为 absolute，这样才能在父 div 内自由移动。

.child {
  position: absolute;
  left: 0;
  top: 0;
}

接下来，就是关键的 JavaScript 部分。我们要监听 touchstart、touchmove 和 touchend 这三个触摸事件。

当 touchstart 事件触发时，记录下触摸点的初始位置。

let startX, startY;
document.addEventListener('touchstart', function(event) {
  startX = event.touches[0].clientX;
  startY = event.touches[0].clientY;
});

在 touchmove 事件中，计算触摸点移动的距离，并根据这个距离来移动子 div。

document.addEventListener('touchmove', function(event) {
  event.preventDefault();
  const moveX = event.touches[0].clientX - startX;
  const moveY = event.touches[0].clientY - startY;
  const child = document.querySelector('.child');
  child.style.transform = `translate(${moveX}px, ${moveY}px)`;
});

最后，在 touchend 事件中，重置初始位置变量，以便下一次滑动操作。

document.addEventListener('touchend', function() {
  startX = null;
  startY = null;
});

通过以上 CSS 和 JavaScript 的结合使用，就能轻松实现子 div 在父 div 内的任意滑动查看功能。不过，在实际应用中，还需要考虑边界处理等细节问题，确保用户在滑动过程中不会出现异常情况。不断优化代码，提升性能，为用户带来更加流畅的交互体验。掌握这一技巧，能够为移动端页面开发增添更多精彩功能。