# observe-dom

Enable detection of content and content child DOM changes. When the plugin is used and these DOM elements change, bs.refresh() will be triggered. The observe-dom plugin has the following features:

  • Debounce feature for CSS attributions which change frequently
  • If the scroll elements change occurs during the scroll animation, refresh will not be triggered.

# Install

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

// or

yarn add @better-scroll/observe-dom

# Usage

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

  new BScroll('.bs-wrapper', {
    observeDOM: true // init observe-dom plugin

# Demo

  <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>
		<button class="btn" @click="handleClick">append two children element</button>


For version <= 2.0.6, because the internal implementation of the plugin uses MutationObserver (opens new window), it cannot detect whether the load of the img Element is complete, so for images with uncertain heights inside the content, you need to wait for the image to load before calling bs.refresh() to recalculate the scrollable size. If the browser does not support MutationObserver, the fallback inside the plugin is to recalculate the scrollable size every second.


In the v2.1.0 version, the observe-image plugin is added to detect the loading of the img tag, so the two can be combined to complement the autorefresh ability to update BetterScroll every time.