Javascript 如何制作可调整大小、可滚动的侧边栏，如Facebook'；s"；聊天/事件记录器；？

我正试图为我的web应用程序设计一个可折叠/可隐藏的侧边栏，但Facebook的聊天/事件记录程序却徒劳无功。它需要有两个独立的部分，垂直分开，并且都可以独立滚动

我已经尝试使用jakiestfu的Snap.js插件来实现这一点。

虽然这非常有效，但它会将我页面上的内容移出视图，并由于CSS

transform:tranlate3d（）

而中断我的

位置：固定的
标题元素

由于这些CSS问题没有很好的解决方案，我想知道是否有人知道一种模仿Facebook聊天/事件记录工具边栏功能的解决方案。
我也做过类似的事情，使用CSS3在固定边栏上调整大小（我的在左边），并在边栏大小改变时调整主页左侧的边距。您可能首先在侧边栏上执行类似的操作，然后以相同的方式将侧边栏拆分为两个


var sizeme=200，
sizeItBro=函数（）{
如果（$（“#边栏”）.width（）！=sizeme）{
sizeme=$（“#边栏”）.width（）+40；
$（“#main”）.css（“左边距”，sizeme+“px”）.text（sizeme+“边距像素”）；
}
};
设置间隔（sizeItBro，150）
*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
保证金：0；
填充：0；
}
#主要{
左边距：200px；
最小高度：100%；
填充：20px；
}
#边栏{
位置：固定；
排名：0；
底部：0；
左：0；
背景：#ffa；
宽度：200px；
最小宽度：100px；
最大宽度：500px；
调整大小：水平；
溢出：自动；
右边框：2px山脊#fe9；
填充：20px；
}
#上半身{
背景：#fe9；
高度：300px；
最小高度：100px；
最大高度：500px；
调整大小：垂直；
溢出：自动；
边界底部：2倍脊#fe9；
利润：-20px-20px-20px；
填充：20px；
}

主要内容
边栏A
边栏B

感谢您的见解——您能提供更多的细节，或者提供一个JSFIDLE最小实现示例让我看看吗？我有点困惑，因为你的回答有点模糊。有点草率，但你明白了。这里的主要问题是，调整大小控制柄始终位于右下角。