vue3 滚动条滚动显示,不动隐藏

你可以使用CSS中的`overflow`属性和`scrollbar-width`属性来实现此效果。

首先，使用`overflow: auto;`将元素的溢出内容滚动条设置为自动，并且只有当内容溢出时才显示滚动条。

接下来，使用`scrollbar-width: none;`将滚动条的宽度设置为0，这样在不滚动时，滚动条就会被隐藏。

最后，使用JavaScript来检测滚动条是否滚动，如果滚动则显示滚动条，如果不滚动则隐藏滚动条。可以通过监听元素的`scroll`事件来实现这一点。以下是代码示例：

HTML:

<div class="scrollable">
  <!-- Your scrollable content here -->
</div>

CSS:

.scrollable {
  overflow: auto;
  scrollbar-width: none;
  /* Other styles for your scrollable element */
}

.scrollable::-webkit-scrollbar {
  /* Styles for your scrollbar */
}

JavaScript:

const scrollable = document.querySelector('.scrollable');

scrollable.addEventListener('scroll', function() {
  if (scrollable.scrollTop === 0) {
    scrollable.style.scrollbarWidth = 'none';
  } else {
    scrollable.style.scrollbarWidth = 'auto';
  }
});

这个示例中我们监听了`scrollable`元素的`scroll`事件，并检查元素的`scrollTop`属性是否等于0。如果等于0，说明滚动条已经滚动到了最顶部，滚动条就会被隐藏。否则，滚动条就会被显示。