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'
  BScroll.use(ObserveDOM)

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

Demo

<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>

<script type="text/ecmascript-6">
  import BScroll from '@better-scroll/core'
  import ObserveDOM from '@better-scroll/observe-dom'

  BScroll.use(ObserveDOM)
  export default {
    data () {
      return {
        nums: 10
      }
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      this.bs.destroy()
    },
    methods: {
      init() {
        this.bs = new BScroll(this.$refs.scroll, {
          observeDOM: true,
          scrollX: true,
          scrollY: false
        })
      },
      handleClick() {
        // observe-dom plugin will refresh bs
        this.nums += 2
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

.observe-dom-container
  text-align center
  .scroll-wrapper
    width 90%
    margin 80px auto
    white-space nowrap
    border 3px solid #42b983
    border-radius 5px
    overflow hidden
    .scroll-content
      display inline-block
      .scroll-item
        height 50px
        line-height 50px
        font-size 24px
        display inline-block
        text-align center
        padding 0 20px
        &:nth-child(2n)
          background-color #C3D899
        &:nth-child(2n+1)
          background-color #F2D4A7
	.btn
		margin 40px auto
		padding 10px
		color #fff
		border-radius 4px
		font-size 20px
		background-color #666   			
</style>

WARNING

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.

TIP

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.