css - 2 列布局 : how to make the 2 columns scrolling independently

Question

我买了一个Bootstrap Theme前一段时间，我需要定制它。我只针对 1024 像素及以上的屏幕。

这是演示页面:http://wbpreview.com/previews/WB05FN804/

基本上主题是2-columns layout .无论您的光标在页面上的哪个位置，您都可以在右侧/主栏中上下滚动。因此，如果您的光标位于左列，则上下滚动会滚动整个页面。

我想提供一个 2 scrolling mechanism : 左列的特定滚动条和主/右列的特定滚动条。

我添加了 overflow: scroll在 <nav id="primary"> .这是工作;如果您打开所有文件夹菜单以超过高度，您可以上下滚动。

但是，当您到达顶部或底部时，它会继续向右滚动。

这就是我要解决的问题。

我怎样才能实现它？

提前致谢

Answer 1

现在您的页面正在利用浏览器滚动功能。当您处于左侧导航时，防止右列停止滚动的一种可靠方法是设置 Overflow:Hidden;当您从主导航中移出鼠标时，到正文并删除溢出内联 css ..

简单的 jQuery 应该能帮到你？

$("#primary").hover(
    function(){$("body").css("overflow", "hidden")}, 
    function(){$("body").css("overflow", "")}
);

希望这对您有所帮助!