```html
<div class="demo-block" id="scroller-demo1">
  <lx-divider>A Horizontal Scroller without Scrollbar</lx-divider>
  <lx-scroller
    lock-y
    :scrollbar-x="false"
  >
    <div class="box1">
      <div
        v-for="i in 100"
        :key="i"
        class="box1-item"
      >
        <span>{{ ' ' + i + ' ' }}</span>
      </div>
    </div>
  </lx-scroller>

  <lx-divider>A Horizontal Scroller with Scrollbar</lx-divider>
  <lx-scroller
    lock-y
    scrollbar-x
  >
    <div class="box1">
      <div
        v-for="i in 7"
        :key="i"
        class="box1-item"
      >
        <span>{{ ' ' + i + ' ' }}</span>
      </div>
    </div>
  </lx-scroller>

  <lx-divider>A Horizontal Scroller without bounce effect</lx-divider>
  <lx-scroller
    lock-y
    scrollbar-x
    :bounce="false"
  >
    <div class="box1">
      <div
        v-for="i in 7"
        :key="i"
        class="box1-item"
      >
        <span>{{ ' ' + i + ' ' }}</span>
      </div>
    </div>
  </lx-scroller>

  <lx-divider>A Vertical Scroller</lx-divider>
  <lx-scroller
    lock-x
    height="200px"
  >
    <div class="box2">
      <p
        v-for="i in 80"
        :key="i"
      >
        placeholder {{ i }}
      </p>
    </div>
  </lx-scroller>

  <lx-divider>A Vertical Scroller with scrollbar y</lx-divider>
  <lx-scroller
    ref="scroller"
    lock-x
    scrollbar-y
    height="200px"
    :prevent-default="false"
  >
    <div class="box2">
      <div v-if="showList1">
        <p
          v-for="i in 80"
          :key="i"
        >
          placeholder {{ i }}
        </p>
      </div>
      <div v-if="!showList1">
        <p
          v-for="i in 10"
          :key="i"
        >
          placeholder {{ i }}
        </p>
      </div>
      <lx-x-button
        style="margin:10px 0;"
        type="primary"
      >
        Button
      </lx-x-button>
    </div>
  </lx-scroller>
  <lx-x-button
    type="primary"
    @click="changeList"
  >
    show another list
  </lx-x-button>
</div>


<script>
// Scroller.md
new Vue({
  el: '#scroller-demo1',
  
  data: {
    showList1: true
  },
  methods: {
    changeList () {
      this.showList1 = false
      this.$nextTick(() => {
        this.$refs.scroller.reset({
          top: 0
        })
      })
    }
  }
})
</script>

<style>
.box1 {
  height: 100px;
  position: relative;
  width: 21500px;
}
.box1-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
</style>
```