css - 2列布局：如何使2列独立滚动

Question

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

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

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

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

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

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

这就是我想要解决的问题。

我怎样才能实现它？

提前致谢

score 1 · Accepted Answer

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

简单的 jQuery 应该对你有帮助吗？

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

希望这可以帮助！

1 回答 1