将滚动条与可滚动的div分离并使用css将其放置在页面上的其他位置

Question

我有一个 div 占据了页面的左半部分，其中有一个

overflow-y: scroll

。我希望该 div 的滚动条位于页面滚动条通常所在的位置（页面的最右侧）。这可以用CSS实现吗？

我尝试过使用

::-webkit-scrollbar

伪元素，但似乎唯一适用的属性是大小和颜色。我尝试过的定位属性都没有被应用（边距、填充、位置等）。

Answer 1

这可能无法通过 CSS 直接实现。

我能想到的一种业余方式是，

• 创建一个跨越页面整个宽度的父 div。
• 在此父 div 内，创建两个子 div：一个用于您的内容（带有 u2060

  overflow-y: scroll

  u2060），另一个 div 占据右侧的剩余空间。

这样，滚动条将显示在页面的最右侧，而实际上它附加到内容 div 上。

示例片段

CSS

.wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.content {
  flex: 1;
  overflow-y: scroll;
  padding: 20px;
  box-sizing: border-box;
}

.fake-scrollbar {
  flex-shrink: 0;
  width: 10px;
  background-color: #a1a1a1; 
}

HTML

  <div class="wrapper">
    <div class="content">
       <!-- Your (left side) content here -->
    </div>

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

u2060

在此之后，您应该注意的一件事是网站的响应能力。