移动端子元素高度低于父元素，如何实现水平滚动？

移动端子元素高度低于父元素且无法水平滚动

在移动端开发中，时常会遇到子元素高度低于父元素且无法水平滚动的困扰。如何解决这一问题，实现子元素在父元素内任意滑动的效果呢？

解决方案

以下为可行的解决方案：

1. 使用绝对定位 (absolute)：将子元素设置为绝对定位，并赋予其父元素一个相对位置 (relative)。这样，子元素就可以在父元素的范围内自由移动。
2. 使用变换 (transform)：通过应用 transform 属性，可以随意移动和缩放子元素，从而实现滑动效果。
3. 使用外部库 (e.g. panzoom)：panzoom 是一个流行的 JavaScript 库，它提供了丰富的功能，能够轻松实现子元素在父元素内的滑动。

实例代码

使用绝对定位

#parent {   position: relative; }  #child {   position: absolute;   left: 0;   top: 0; }

使用变换

#parent {   position: relative; }  #child {   position: relative;   transform: translate(0, 0); }

使用 panzoom

const panzoom = Panzoom(document.getElementById('parent'), {   // 配置选项 });

以上解决方案都能有效实现子元素在父元素内的任意滑动效果，具体选择哪种方案取决于项目需求和个人偏好。