显示网格 - 如何独立滚动侧边栏

Question

我有一个简单的布局 - 左sidebar和右content在名为panelb的父

中

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望修复sidebar，即独立于主content滚动，但仅使用鼠标滚轮，即没有可见的滚动条。

content应该正常滚动为主页面滚动。

任何帮助？