2列布局:如何使2列独立滚动

时间:2013-09-20 21:09:57

标签: css twitter-bootstrap scrollbar overflow

前一段时间我买了Bootstrap Theme,我需要自定义它。我只针对1024px以上的屏幕。

以下是演示页:http://wbpreview.com/previews/WB05FN804/

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

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

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

然而,当您到达顶部或底部时,它会继续滚动右列。

这就是我想解决的问题。

我怎样才能实现它?

提前致谢

1 个答案:

答案 0 :(得分:1)

现在您的页面正在利用浏览器滚动功能。在左侧导航中防止右列停止滚动的一种有效方法是设置溢出:隐藏;当您从主导航鼠标中退出时,移至正文并删除溢出内联css ..

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

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

希望这有帮助!