better-scroll中嵌套原生滚动组件,原生滚动组件失效问题

Posted 2023-05-17

参考技术A 问题描述: 滑动外部竖向组件区域(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>