这样实现的滚动条还是占据宽度的，我需要的是滚动条飘浮在界面上，不入文档流

如果你想要实现一个飘浮在界面上且不占据宽度的滚动条，可以使用一些技巧。以下是一种常用的方法：

首先，你可以创建一个固定定位的容器，用于包裹你的内容和滚动条。设置这个容器为固定定位可以让它飘浮在界面上。

<div class="scroll-container">
  <!-- 内容 -->
</div>

接下来，在CSS中设置这个容器的样式，包括固定定位、宽度和高度等。

.scroll-container {
  position: fixed; /* 固定定位 */
  top: 0;
  right: 0;
  width: 10px; /* 设置宽度 */
  height: 100vh; /* 设置高度 */
}

然后，你可以在这个容器内部创建一个滚动条元素。这个滚动条元素可以是一个`div`或者其他适合的元素。

<div class="scrollbar"></div>

在CSS中，设置这个滚动条元素的样式，包括背景颜色、宽度、高度等。

.scrollbar {
  background-color: #888; /* 设置滚动条颜色 */
  width: 100%; /* 设置滚动条宽度 */
  height: 100%; /* 设置滚动条高度 */
}

最后，你可以使用JavaScript来监听内容区域的滚动事件，并通过改变滚动条元素的高度来模拟滚动效果。

const scrollContainer = document.querySelector('.scroll-container');
const scrollbar = document.querySelector('.scrollbar');

scrollContainer.addEventListener('scroll', () => {
  const scrollPercentage = (scrollContainer.scrollTop / (scrollContainer.scrollHeight - scrollContainer.clientHeight)) * 100;
  const scrollbarHeight = (scrollContainer.clientHeight / scrollContainer.scrollHeight) * 100;

  scrollbar.style.height = `${scrollbarHeight}%`;
  scrollbar.style.top = `${scrollPercentage}%`;
});

这样，你就可以实现一个飘浮在界面上且不占据宽度的滚动条了。希望对你有所帮助！如果还有其他问题，请继续提问。