实现局部滚动的两种方法: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.切记,触摸滚动,而不是鼠标滚动,不要像我一样傻傻的用鼠标滚动,然后就看不到局部滚动的效果,还以为是哪里用的不对。解释:因为这个框架主要用于移动端,而我们移动端哪里来的鼠标,不就是触摸嘛。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章