js原生滚动与使用插件better-scroll不起作用原因

简介: js原生滚动与使用插件better-scroll不起作用原因

js原生滚动与使用插件better-scroll不起作用原因


1,js原生滚动:(只需要设置父容器wrapper的高度和设置一下overflow-y:scroll,默认处理了overflow: hidden;

/* 局部滚动 ~但是在移动端滚动非常卡顿*/
.wrapper{
  height: 300px;
  overflow-y: scroll;
  border: 1px solid orange;
}

 

2使用插件better-scroll不起作用原因:

(1)父容器wrapper高度比内容大

(2)父容器需要设置样式:overflow: hidden;

(3)其他的标签需要放到内容里,结构是 wrapper包裹content (内容)

 

3,代码:

<template>
<div id="category">
  <div class="wrapper">
    <ul class="content">
      <li>分类列表1</li>
      <li>分类列表2</li>
      <li>分类列表3</li>
      <li>分类列表4</li>
      <li>分类列表5</li>
      <li>分类列表6</li>
      <li>分类列表7</li>
      <li>分类列表8</li>
      <li>分类列表9</li>
      <li>分类列表10</li>
      <li>分类列表11</li>
      <li>分类列表12</li>
      <li>分类列表13</li>
      <li>分类列表14</li>
      <li>分类列表15</li>
      <li>分类列表16</li>
      <li>分类列表17</li>
      <li>分类列表18</li>
      <li>分类列表19</li>
      <li>分类列表20</li>
      <li>分类列表21</li>
      <li>分类列表22</li>
      <li>分类列表23</li>
      <li>分类列表24</li>
      <li>分类列表25</li>
      <li>分类列表26</li>
      <li>分类列表27</li>
      <li>分类列表28</li>
      <li>分类列表29</li>
      <li>分类列表30</li>
      <li>分类列表31</li>
      <li>分类列表32</li>
      <li>分类列表33</li>
      <li>分类列表34</li>
      <li>分类列表35</li>
      <li>分类列表36</li>
      <li>分类列表37</li>
      <li>分类列表38</li>
      <li>分类列表39</li>
      <li>分类列表40</li>
      <li>分类列表41</li>
      <li>分类列表42</li>
      <li>分类列表43</li>
      <li>分类列表44</li>
      <li>分类列表45</li>
      <li>分类列表46</li>
      <li>分类列表47</li>
      <li>分类列表48</li>
      <li>分类列表49</li>
      <li>分类列表50</li>
      <li>分类列表51</li>
      <li>分类列表52</li>
      <li>分类列表53</li>
      <li>分类列表54</li>
      <li>分类列表55</li>
      <li>分类列表56</li>
      <li>分类列表57</li>
      <li>分类列表58</li>
      <li>分类列表59</li>
      <li>分类列表60</li>
      <li>分类列表61</li>
      <li>分类列表62</li>
      <li>分类列表63</li>
      <li>分类列表64</li>
      <li>分类列表65</li>
      <li>分类列表66</li>
      <li>分类列表67</li>
      <li>分类列表68</li>
      <li>分类列表69</li>
      <li>分类列表70</li>
      <li>分类列表71</li>
      <li>分类列表72</li>
      <li>分类列表73</li>
      <li>分类列表74</li>
      <li>分类列表75</li>
      <li>分类列表76</li>
      <li>分类列表77</li>
      <li>分类列表78</li>
      <li>分类列表79</li>
      <li>分类列表80</li>
      <li>分类列表81</li>
      <li>分类列表82</li>
      <li>分类列表83</li>
      <li>分类列表84</li>
      <li>分类列表85</li>
      <li>分类列表86</li>
      <li>分类列表87</li>
      <li>分类列表88</li>
      <li>分类列表89</li>
      <li>分类列表90</li>
      <li>分类列表91</li>
      <li>分类列表92</li>
      <li>分类列表93</li>
      <li>分类列表94</li>
      <li>分类列表95</li>
      <li>分类列表96</li>
      <li>分类列表97</li>
      <li>分类列表98</li>
      <li>分类列表99</li>
      <li>分类列表100</li>
    </ul>
    <!-- 这里可以放一些其它的 DOM,但不会影响滚动 -->
  </div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: "Category",
  data(){
    return {
      wrap: null
    }
  },
  //生命周期~挂载时
  mounted(){
    let wrapper = document.querySelector('.wrapper')
    this.wrap = new BScroll(wrapper);
    console.log(this.wrap);
  }
}
</script>
<style scoped>
/* 局部滚动 ~但是在移动端滚动非常卡顿*/
.wrapper{
  /*position: absolute;*/
  height: 300px;
  /*overflow-y: scroll;*/
  border: 1px solid orange;
  /* beter-scroll需要设置overflow: hidden才可以滚动  */
  overflow: hidden;
}
</style>



目录
相关文章
|
9天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
15 2
|
9天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
15 1
|
9天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
9天前
|
监控 JavaScript 前端开发
超越原生:探索Node.js中最佳文件系统三方库
超越原生:探索Node.js中最佳文件系统三方库
|
9天前
countup.js包实现数字滚动-大屏项目
countup.js包实现数字滚动-大屏项目
12 1
|
10天前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
13 2
|
11天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
14 0
|
11天前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
15 0
|
11天前
|
JavaScript 安全 前端开发
原生JS实现一键复制,一键粘贴
原生JS实现一键复制,一键粘贴
13 0
|
11天前
|
JavaScript
js的插件
js的插件
15 1