Javascript 使固定边栏内的内容可滚动

我做了这个js小提琴：

它有一些较长的内容和一个固定的侧边栏，其中包含内容。我试图弄清楚如何使侧边栏中的内容

#侧边栏内容
可滚动，而不是使用
overflow-y:scrollable但当用户使用鼠标滚轮、箭头键、主滚动条等时，实际上会与页面一起滚动

这能以某种方式实现吗？
您可以尝试：

#page-wrapper{
    overflow: hidden;
    position: relative;
    width: 100%;
}
#sidebar {
    width: 30%;
    height: 100%;
    position: absolute;
    left: 20px;
    top:0px;
    bottom:0px;
    background: #fff;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 20px;
}    

这不是“固定”元素的概念。如果你真的想要一个固定的元素，也许你需要重新思考。@Steve我理解，但问题是如果它不固定，白色部分的侧边栏最终会“完成”，事实上侧边栏会完成，只有灰色空间而不是侧边栏，但对于我的设计理念，我需要一直保持白色。这是一个非常常见的问题。试着用整个页面的背景或类似的东西来解决这个问题。你的解决方案对我来说毫无意义。@Steve好吧，我真的不想用背景来做这件事，我想我会等着看是否有其他人想出了一个主意是的！做我最初的打算。