实现局部滚动的两种方法：1.三行css代码2.使用BScroll框架

效果展示

CSS方法

    
分类列表1
    
分类列表2
    
分类列表3
    ...
    
分类列表100
  
  
  //css
  .content{
     
  height: 150px;
  background-color: #ff8198;
  overflow-y: scroll;
}

BScroll方法

<template>
 <div class="wrapper">
    <ul class="content">
      <li>分类列表1</li>
      <li>分类列表2</li>
      ...
      <li>分类列表100</li>
    </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
  export default {
     
    name: "Category",
    data(){
     
      return {
     
        scroll:null
      }
    },
    //组件创建完后调用
    created() {
     
      //new BScroll('.wrapper')
    },
    mounted() {
     
      //console.log(document.querySelector('.wrapper'));
      this.scroll = new BScroll(document.querySelector('.wrapper'))
    }
  }
</script>

<style scoped>
.wrapper{
     
  height: 150px;
  background-color: #ff8198;
  overflow: hidden;
}
</style>

踩坑

1.注意不要在created()方法中里面用BScroll，因为此方法是在组件创建时调用，如果把BScroll写里面会获取不到元素。
2.上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。所以，这里我们要滚动的是ul里面的li，但是ul不能作为父元素，否则只有一个li是滚动的，不是我们要的效果，所以要在ul外面包一个div。
3.切记，触摸滚动，而不是鼠标滚动，不要像我一样傻傻的用鼠标滚动，然后就看不到局部滚动的效果，还以为是哪里用的不对。解释：因为这个框架主要用于移动端，而我们移动端哪里来的鼠标，不就是触摸嘛。