vue学习之移动端局部滚动

首先我们来看一下要实现的滚动效果：

部分代码如下：

<div class="scroll_wrap">
  <div class="left_list_box" ref="leftBox" :style="'height:' + maxHeight">
    <div v-for="(item, index) in parentTypeList" :key="index" @click="parentItemClick(item)" :class="item.active ? 'active' : ''" class="list_item">{{ item.name }}</div>
  </div>
</div>

// stylus样式
// 重点是scroll_wrap的样式
.scroll_wrap
  position fixed
  width 12.2rem
  top 10.1rem
  bottom 0
  overflow-y scroll
  // 惯性滚动效果
  -webkit-overflow-scrolling: touch; /* ios5+ */
.left_list_box
  display flex
  flex-direction column
  align-items center
  background-color #fff
  border-radius 0 0 1rem 0
  margin-bottom 7.8rem