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

Posted 2023-02-22

【中文标题】vuescroll 库中的 CSS 滚动条无法正常工作

【英文标题】：CSS scrollbar in vuescroll library is not working properly

【发布时间】：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。仅用这个很难调试。

【参考方案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);