Nuxt项目使用vuescroll库时CSS滚动条失效及overflow异常问题求助

原因说明 #

vuescroll在sizeStrategy: 'percent'模式下会自动监听父容器尺寸变化、接管滚动容器的overflow属性，你关闭设备工具栏后页面布局重排，触发了vuescroll的内部尺寸计算逻辑，计算异常导致错误将overflow设置为hidden，和你本身的代码无关。

可行解决方案 #

• 方案1：强制覆盖滚动容器样式（最便捷）
  在对应页面的样式块或者全局公共样式中添加以下代码，优先级高于vuescroll自动设置的内联样式即可生效：

/* 可通过F12检查实际的滚动容器类名进行替换，以下为默认类名 */
.vue-scroll-scrollPanel {
  overflow-x: scroll !important;
  overflow-y: hidden !important;
}

你当前配置关闭了纵向滚动、开启横向滚动，可按实际需求调整对应方向的overflow值。

• 方案2：切换工具栏后手动刷新vuescroll实例
  监听设备工具栏的关闭完成事件，等页面布局稳定后，调用vuescroll实例的refresh方法触发重新计算尺寸，就不会错误生成overflow:hidden属性：

// 你的工具栏关闭回调逻辑
handleToolbarClose() {
  this.$nextTick(() => {
    // 替换成你绑定在vuescroll组件上的ref名称
    this.$refs.myVuescroll.refresh()
  })
}

• 方案3：给vuescroll的父容器显式设置固定尺寸
  vuescroll的percent模式需要明确的父容器尺寸作为计算基准，给父容器加上固定高度/宽度即可避免计算异常，也不会出现sizeStrategy设为number后页面高度超出的问题：

/* 替换为你实际的vuescroll父容器类名 */
.vuescroll-parent {
  /* 按你实际的页面布局计算高度，比如减去工具栏的高度 */
  height: calc(100vh - 60px);
  width: 100%;
}

内容的提问来源于stack exchange，提问作者Elham