滚动生成动态内容的固定侧边栏

Question

我有两列，左列是主要提要，右列是侧边栏。

我想分别滚动每一列。

在这种情况下，左疼痛滚动效果很好。

但是右疼痛滚动不起作用。

右侧面板中的内容是由 javascript 动态生成的，因此有时会比屏幕长。

<div class="container" style="padding-top: 60px;" >

<div class="row">
    <div class="col-6 col-md-6 col-sm-6 col-xs-6">

    Main Feed

    </div>

    <div class="col-6 col-md-6 col-sm-6 col-xs-6" 
    style="overflow-y: auto;display: block;position:fixed;right:10px;">

    sidebar content this contents is generated dynamically by javascript

    </div>
</div>
</div>

Answer 1

<div class="col-6 col-md-6 col-sm-6 col-xs-6" 
     style="overflow-y: auto;
            display: block;
            max-height:100vh;
            right:10px;
            position: fixed;">
</div>

检查https://codepen.io/ashishkrtewari/pen/BaaJXWy

我刚刚添加了一些生成的内容和 100vh 的最大高度。 如果没有最大高度，您将看不到滚动条，因为没有限制显示滚动条的高度。

请检查