js原生滚动与使用插件better-scroll不起作用原因
Posted 一乐乐
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
以上是关于js原生滚动与使用插件better-scroll不起作用原因的主要内容,如果未能解决你的问题,请参考以下文章