问题描述

在使用 Vue 项目中，当我们使用了 vue better scroll 插件后，有时候会出现无法滚动的情况。

解决方法

方法一：检查容器高度

一般情况下，使用 vue better scroll 进行滚动时，需要将容器高度设置成固定值或者是百分比值。如果容器高度没有设置或者设置不正确，会导致插件无法正常滚动。因此，我们需要检查一下容器高度是否设置正确。

例如，以下代码中的 scroll-wrapper 容器未设置高度，导致无法滚动：

<template>
  <div>
    <div class="scroll-wrapper">
      <!-- TODO: some content -->
    </div>
  </div>
</template>

我们可以将 scroll-wrapper 容器的高度设置成 300px，如下所示：

<template>
  <div>
    <div class="scroll-wrapper" style="height: 300px;">
      <!-- TODO: some content -->
    </div>
  </div>
</template>

注意：以上示例为简化代码，实际项目中不推荐直接在 HTML 中使用 style 属性设置样式。

方法二：检查滚动的内容是否超出容器

在 vue better scroll 中，插件会根据容器的高度和滚动内容的高度来计算滚动条的高度。如果滚动内容未超出容器，会导致插件无法正常滚动。

例如，以下代码中的滚动内容不超出容器，导致无法滚动：

<template>
  <div>
    <div class="scroll-wrapper" style="height: 300px;">
      <div class="scroll-content" style="height: 100px;">
        <!-- TODO: some content -->
      </div>
    </div>
  </div>
</template>

我们可以将滚动内容的高度增加到超出容器，如下所示：

<template>
  <div>
    <div class="scroll-wrapper" style="height: 300px;">
      <div class="scroll-content" style="height: 400px;">
        <!-- TODO: some content -->
      </div>
    </div>
  </div>
</template>

注意：以上示例为简化代码，实际项目中不推荐直接在 HTML 中使用 style 属性设置样式。