CODEWITHSUNDEEP
javascriptjqueryhtmlcss
whitebear
whitebear

Reputation: 12423

Scrolling of fixed sidebar where dynamically contents are generated

I have two columns, left column is main feed and right column is sidebar.

I want to scroll each columns separately.

In this case left pain scroll works well.

However right pain scroll doesn't works.

Contents in right panel are dynamically generated by javascript, so it's sometimes getting longer than screen.

<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>

Upvotes: 0

Views: 433

Answers (1)

Ashish Tewari
Ashish Tewari

Reputation: 133

<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>

Check https://codepen.io/ashishkrtewari/pen/BaaJXWy

I just added some generated content and max-height of 100vh. Without a max height you will not see the scrollbar as there is nothing restricting the height to reveal a scrollbar.

Please check

Upvotes: 1

Related Questions