vuescroll 库中的 CSS 滚动条无法正常工作答案

【问题标题】：CSS scrollbar in vuescroll library is not working properlyvuescroll 库中的 CSS 滚动条无法正常工作
【发布时间】：2022-01-04 14:40:37
【问题描述】：

我在我的 Nuxt 项目中使用了vuescroll library，当我为不同设备停用切换工具栏时，CSS 滚动条不起作用。

有一个错误使overflow: scroll 隐藏，我确信我没有使用过这种 CSS 样式。当我将sizeStrategy 更改为number 时，它可以工作，但高度会大大超过。

谁能帮我解除这个溢出？

ops: {
  vuescroll: {
    mode: 'native',
    sizeStrategy: 'percent',
    locking: true
  },
  bar: {
    showDelay: 500,
    keepShow: true,
    background: '#FFFFFF',
    opacity: 1,
    hoverStyle: false,
    size: '1%',
    disable: false
  },
  scrollPanel: {
    initialScrollY: false,
    initialScrollX: false,
    scrollingX: true,
    scrollingY: false,
    speed: 300,
    easing: undefined,
    verticalNativeBarPos: 'right'
  },
  rail: {
    background: '#A3ACBC',
    opacity: 0.3,
    size: '1%',
    specifyBorderRadius: '1%',
    gutterOfEnds: '0',
    gutterOfSide: '0',
    keepShow: false
  }
}

【问题讨论】：

嗨，我们可能在这里需要minimal reproducible example。仅用这个很难调试。

标签： html css vue.js nuxt.js scrollbar

【解决方案1】：

嗨！我通过卸载库并改用css滚动条解决了这个问题。这是制作滚动的解决方案：

.carousel {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: block !important;
  padding-bottom: $spacing-09;
  white-space: nowrap;
  scroll-behavior: smooth;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  .featured-item {
    display: inline-block;
    width: calc((#{$column-width-mobile} + #{$column-gap-mobile}) * 11);
    white-space: normal;
    vertical-align: top;
    margin-right: calc(#{$column-gap-mobile} * 2);
  }
}
#wrapper {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 30px;
  }
  ::-webkit-scrollbar-track {
    background: rgba(163, 172, 188, 0.2);
  }
}

【讨论】：