BetterScroll 2.0

# observe-dom

开启对 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 插件
  })

# 示例

<template>
  <div class="observe-dom-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content">
        <div class="scroll-item" v-for="num in nums" :key="num">{{nums - num + 1}}</div>
      </div>
    </div>
		<button class="btn" @click="handleClick">append two children element</button>
  </div>
</template>

注意

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

提示

v2.1.0 版本，新增 observe-image 插件来探测 img 标签的加载，因此这两者可以搭配起来，补齐主动刷新的能力来更新 BetterScroll 每次滚动的宽度或者高度。

← observe-image →