0

I have a simple layout - left sidebar and right content inside a parent named panelb

.panelb{
display:grid;
grid-template-columns: auto 1fr;
margin-top:25px;
background:gray;
}

.sidebar{
height:calc(100vh - 50px);
background:gold
}

.namesingle{
padding:2px 25px 2px 9px;
}

.content{
padding:5px;
background:lightgreen;
}
<div class='panelb'>
<div class='sidebar'>
<div class='namesingle'>SINGLE NAME</div>
<div class='namesingle'>SINGLE NAME</div>
<div class='namesingle'>SINGLE NAME</div>
</div>

<div class='content'>
<div class='some content'>SOME CONTENT</div>
<div class='some content'>SOME CONTENT</div>
<div class='some content'>SOME CONTENT</div>
</div>
</div>

I want sidebar to be fixed i.e. scrolling independently of main content but only using mouse wheel, i.e. without a visible its own scrollbar.

content should scroll normally as main page scroll.

Any help?

  • there is a lot of plugins out there that can help you , try iscroll.js for example – dippas Jun 02 '18 at 07:59
  • 1
    https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Rohith Murali Jun 02 '18 at 08:02
  • @dippas, so the grid system is promoted as a holy grail of css. And still I need some plugins and workarounds for so simple thing as a scroll independently its elements. –  Jun 02 '18 at 08:26
  • I just said that because I understand you want invisible scrollbar but still be able to scroll (and only with mouse wheel) – dippas Jun 02 '18 at 08:28
  • That's simply because grid allows the layout **nicknamed** *"the holy grail"* to be created without the use of JavaScript. It doesn't mean `html {display:grid}` will magically transform it into the website of your prayers which designs and codes itself, Puerto. – tao Jun 02 '18 at 08:45

0 Answers0