實現局部滾動的兩種方法：1.三行css代碼2.使用BScroll框架

效果展示

CSS方法

<ul class="content">
    <li>分類列表1</li>
    <li>分類列表2</li>
    <li>分類列表3</li>
    ...
    <li>分類列表100</li>
  </ul>
  
  //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.切記，觸摸滾動，而不是鼠標滾動，不要像我一樣傻傻的用鼠標滾動，然後就看不到局部滾動的效果，還以爲是哪裏用的不對。解釋：因爲這個框架主要用於移動端，而我們移動端哪裏來的鼠標，不就是觸摸嘛。