横向滚动动态宽度时无法滚动问题

项目开发中需要实现横向滚动，但是客户的图片宽高并不是固定的，要求图片高度固定，宽度自适应，但是在使用@better-scroll/core实现横向滚动时，如果图片设置为动态宽度后，却无法正常滚动了，这里我们需要使用另外一个插件进行辅助ObserveDOM，结合ObserveDOM终于可以正常滚动了。

import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'

BScroll.use(ObserveDOM)

new BScroll(wrapper, {
  scrollX: true,
  observeDOM: true
})

@better-scroll/observe-dom介绍

@better-scroll/observe-dom是BetterScroll的一个重要插件，主要功能是监测DOM变化并自动刷新滚动状态。以下是该插件的关键特性：

主要功能

• 自动监测content及其子元素的DOM变化
• 当DOM元素发生变化时，自动触发scroll的refresh方法
• 针对频繁变化的CSS属性使用debounce处理
• 在scroll动画过程中的DOM变化不会触发refresh

使用场景

• 当content内容是异步加载时
• 当content高度会动态变化时
• 需要自动更新内容盒子的情况

安装和使用方法

// 安装
npm install @better-scroll/observe-dom --save

// 使用
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'

BScroll.use(ObserveDOM)

new BScroll('.wrapper', {
  observeDOM: true  // 开启observe-dom插件
})

工作原理

当content元素高度在实例化后发生变化时，插件会自动重新获取content元素的高度，并重新计算滚动和拖动的距离。这对于异步加载内容的场景特别有用，可以确保滚动效果正常工作。