1. 您现在的位置:首页
  2. 新闻
  3. 技术支持
  4. 实现局部滚动的两种方法:1.三行css代码2.使用BScroll框架

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

2021-01-18 阅读数:50

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;}1234567891011121314

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>1234567891011121314151617181920212223242526272829303132333435363738

踩坑

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