vue-scroll 使用注意（仅作参考）_vue 使用vue-seamless-scroll无线滚动只能设置固定的高吗-优快云博客

本文链接：https://blog.youkuaiyun.com/MagicWing_zs/article/details/115539239

本文介绍在不同高度设置下使用Vue-scroll组件的注意事项。包括在高度未固定时如何通过定位实现滚动效果，在高度固定时如何避免Flex布局的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-scroll 使用注意（仅作参考）

没有固定的高 100% 采取的布局及需要注意的点

/**
          【在没有固定高的情况下，使用此种布局】需要注意下面五点
          <div class="main_left">
            <div class="shceme_list_wrapper">
              <vue-scroll>
                <div class="shceme_list">
                </div>
              </vue-scroll>
            </div>
          </div>
          1、只有 内容 (div scheme) 的任意父元素
            (shceme_list、shceme_list_wrapper、main_left)
            有一个明确的高 (100%, flex: 1 不行) 就能出滚动条
          2、这里我们拿不到具体的高，就用定位top:0, bottom: 0 来出现高
            外面再包一层 shceme_list_wrapper 用来占位，不会因为absolute而让页面坍塌
          3、如果“main_left” 为 display: flex; 则不出滚动条，需要为 flex-direction: column;
          4、shceme_list_wrapper 的高需要设为 100%
          5、main_left 的高无所谓
        */
.main_left {
  			【如果为flex则必须为flex-direction: column】
        width: 430px;
        padding-left: 20px;
        .shceme_list_wrapper {
          height: 100%; 【必须】
          .shceme_list {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            .scheme {
              width: 100%;
              height: 100px;
              background-color: red;
            }
            .scheme+.scheme {
              margin-top: 10px;
            }
          }
        }
      }

有固定的高的情况下

/**
          【有固定高的情况下，使用此种布局】
          <div class="main_left">
              <vue-scroll>
                <div class="shceme_list">
                </div>
              </vue-scroll>
          </div>
          1、只有 内容 (div scheme) 的任意父元素
            (main_left、shceme_list)
            有一个明确的高就能出滚动条
					2、即使main_left为flex也没有影响
					3、但是shceme_list为flex会有影响
        */
.main_left {
  			【为flex没有任何影响】
        width: 430px;
  			height: 800px; 【main_left、shceme_list 任意有固高即可】
        padding-left: 20px;
        .shceme_list {
          .scheme {
            width: 100%;
            height: 100px;
            background-color: red;
          }
          .scheme+.scheme {
            margin-top: 10px;
          }
        }
      }