How can i make scroll bar visible only when used?

Question

I want to make scroll bar visible only user scrolling like Twitch scroll bar. and how can i make scroll bar start below nav bar? (Also like Twitch scroll bar...)

Answer 1

I have no idea what is "Twitch scroll bar" but here's my answer based on data given in your question. I think that scroll bar hiding when not used is depending on what browser you are using. But the latter problem (start below navbar) I solved below. Replace Lorem Ipsum paragraphs with you website content.

 #navbar { position: absolute; top: 0; left: 0; width: 100%; height: 50px; background-color: lightblue; } #pageContent { position: absolute; top: 50px; left: 0; width: calc(100% - 10px); height: calc(100% - 50px); padding-left: 5px; padding-right: 5px; overflow: scroll; }

 <div id="navbar"></div> <div id="pageContent"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>