使用 better-scroll 实现纵向横向双向滚动并设置吸顶

使用 better-scroll 实现纵向横向双向滚动

需要达到的效果：右侧内容左右滚动时，左侧边栏不动，上下滑动时整体内容上下滚动

如图：

1.纵向滚动

安装并引入

import BScroll from 'better-scroll'

因为滚动默认是纵向的，所以不需要多设置其他参数

首先在 HTML 部分设置滚动外层容器（centent)和滚动内容(content-box)，设置外层 div 的高度比如 100vh,content-box 高度由内容撑开。打开控制台查看是否 content-box 高度大于 content 高度，如果是，基本就没问题。

<div ref="wrapper" class="content">
  <div class="content-box">
    <ul>
      ...
    </ul>
  </div>
</div>

let scroll = new BScroll(this.$refs.wrapper)

2.横向滚动

在纵向滚动的基础上添加横向滚动，需要注意的是样式的设定。为了让右边内容左右滚动的时候左边侧栏能够固定，所以我的办法是左边侧栏和右边滚动内容分开来写。

左边侧栏宽度设为 90px，右边内容宽度动态获取。right-detail 里的 ul 宽度要比 right-detail 的宽度值大。要使右边 ul 里的内容横向排列（比如 li）可以使用 white-space: nowrap; 同时还要注意其他样式的设定。具体样式看文章末尾贴的代码。

<div ref="wrapper" :style="{
       width: originWidth + 'px' }" class="content">
  <div>
    <p class="title">
      界面标题
    </p>
    <div class="box-content">
      <!-- 左边侧栏 -->
      <div class="left-name">
        <ul>
          <li>
            <span>固定的左边标题</span>
          </li>

          <li v-for="(item, index) in 数据" :key="index">
            <span>{
  { 动态左边侧栏}}</span>
          </li>
        </ul>
      </div>
      <!-- 右边内容 -->
      <div class="right-detail" ref="listWrapper" :style="{
       width: originWidth - 90 + 'px' }">
        <ul>
          <li>
            ...固定的右边标题或者动态获取的
          </li>
          <li v-for