如何在相对div中包含固定条并完美显示滚动条

Question

我想在相对div中包含固定栏。但是滚动条在固定条区域上消失了。 我想知道如何在没有消失区域的情况下显示完美的滚动条。

下面的代码。

<div class="wrapper">
    <div class="scrolling-contents">
        <div class="fixed-wrapper">
          <div class="fixed-bar">
            fixed bar
          </div>
        </div>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
        aaaaaaa<br/>
    </div>
</div>

    .wrapper {
        top: 20px;
    }
    .scrolling-contents {
        position: relative;
        width: 100%;
        height: 250px;

        background-color: #CCC;
        overflow: auto;
    }
    .fixed-wrapper {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    }
    .fixed-bar {
        position: fixed;
        background-color: red;
        width: 100%;
        height: 20px;
    }

我想根据容器div获取滚动条宽度。

以下屏幕截图：

由于固定的条形区域，您可以检查消失的滚动条。

Answer 1

为什么需要在固定杆上添加绝对位置？通过查看您想要实现的目标，这似乎已经足够：

.wrapper {
            position: relative;
            top: 20px;
        }
        .scrolling-contents {
            width: 100%;
            height: 250px;
    
            background-color: #CCC;
            overflow: auto;
        }
        .fixed-wrapper {
           /* Removed position:absolute */
            width: 100%;
            top: 0;
            left: 0;
        }
        .fixed-bar {
           /* Removed position:absolute */
            background-color: red;
            width: 100%;
            height: 20px;
        }

<div class="wrapper">
        <div class="fixed-wrapper">
            <div class="fixed-bar">
              fixed bar
            </div>
        </div>
        <div class="scrolling-contents">
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
            aaaaaaa<br/>
        </div>
    </div>