Question

开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性：

• 针对改变频繁的 CSS 属性，增加 debounce
• 如果改变发生在 scroll 动画过程中，则不会触发 refresh

安装

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

// or

yarn add @better-scroll/observe-dom

使用

  import BScroll from '@better-scroll/core'
  import ObserveDOM from '@better-scroll/observe-dom'
  BScroll.use(ObserveDOM)

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

示例

<<< @/examples/vue/components/observe-dom/default.vue?template <<< @/examples/vue/components/observe-dom/default.vue?script <<< @/examples/vue/components/observe-dom/default.vue?style

:::warning 注意 由于插件的内部实现使用的是 MutationObserver，它无法探测到 img 标签的是否加载完成，因此对于 content 内部含有不确定高度的图片，需要等图片加载完成再调用 bs.refresh() 来重新计算可滚动尺寸。如果浏览器不支持 MutationObserver，插件内部的降级方案是每秒重新计算可滚动的尺寸。 :::

:::tip 提示 v2.1.0 版本，新增 https://www.wenjiangs.com/doc/2NCTMTxSobserve-image 插件来探测 img 标签的加载，因此这两者可以搭配起来，补齐主动刷新的能力来更新 BetterScroll 每次滚动的宽度或者高度。 :::