Question

我正在开发我的网站的新布局＆amp;我遇到了GIZMODO网站，我发现该网站可以利用页面滚动条滚动网站中的部分内容。他们怎么能成功呢？我通过Firebug研究了他们的CSS，但我很困惑。

这是我的测试页面1：http://raptor.hk/dev/theme/dummy.html（此页面可以将内容居中，但不能按我的要求滚动）

以下是我的测试页面2：http://raptor.hk/dev/theme/dummy2.html（此页面可以根据需要滚动，但无法居中）

我只想让左侧内容的页面滚动页面滚动条，但右侧内容保持在原始位置，加上整个站点应该对齐中心，即组合我的测试页面1＆amp;谁能给我点灯吗？

Answer 1

虽然你的Gizmodo示例使用额外的脚本来处理侧边栏的（垂直滚动条）（甚至在所有浏览器中都不起作用），但纯CSS的效果完全可以实现，它甚至不像它似乎乍一看。

所以你想要：

水平居中的布局，可能针对不同的浏览器窗口大小加宽或缩小，
左侧的主要内容，可由浏览器的主滚动条垂直滚动
右侧的侧边栏，粘贴在浏览器窗口的顶部，可以与主要内容分开滚动，只在鼠标悬停时显示滚动条。当滚动到侧边栏的末尾时，窗口的滚动条会接管。

请参阅 demonstration fiddle ，它可以完成所有这些工作。

样式表：

html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

标记：

<div class="wrapper">
    <div id="content">
    </div>
</div>
<div id="overlay">
    <div class="wrapper">
        <div id="sidebar">
        </div>
    </div>
</div>

在IE7，IE8，IE9，Opera 11.50，Safari 5.0.5，FF 5.0，Chrome 12.0的Win7上测试。

我假设主要内容的流体宽度和侧边栏的静态宽度，但两者都可以完全流畅，如你所愿。如果您想要静态宽度，请参阅 this demo fiddle ，这会使标记更简单。

更新

如果我正确理解您的评论，那么您希望在鼠标悬停在侧边栏上时阻止滚动主要内容。为此，侧边栏可能不是主要内容（即浏览器窗口）的滚动容器的子节点，以防止滚动事件冒泡到其父节点。

我认为 new demo fiddle 可以满足您的需求：

<div id="wrapper">
    <div id="content">
    </div>
</div>
<div id="sidebar">
</div>

Answer 2

您可以使用position:fixed执行此操作。 GIZMODO样式表的相关部分：

#rightcontainer {
    position: fixed;
    margin-bottom: 10px;
    width: 300px;
    height: 100%;
    top: 0;
}

Answer 3

今天很多网站都可以看到这种技术。他们所做的是将position: fixed提供给屏幕右侧的div，因此它不受页面滚动的影响。

CSS：

body {
   position: relative;
}
#leftSide {
  width: 600px;
  ...rules ...
}

#rightSide {
   position: fixed;
   left: 610px;
}

HTML：

<body>
<div id="leftSide">
   affected by scrolling
</div>

<div id="rightSide">
  Not affected by scrolling
</div>
</body>

Answer 4

我误解了你的问题。我以为你想要主滚动条也在另一个div中滚动东西。好吧，你走了：

$(function(){
    $(document).scroll(function(){
        $('#my_div').stop().animate({
            scrollTop : $(this).scrollTop()
        });            
    });
});

演示：http://jsfiddle.net/AlienWebguy/c3eAa/

Answer 5

我认为你正在寻找这样的东西。

http://jsfiddle.net/RnWdh/

请注意，您可以根据需要更改#main_content的宽度，只要它不会在您的固定菜单“后面”，因为您的文字将会消失。

将固定菜单放在居中容器右侧的技巧是使用left: 50%和margin-left进行正确调整。

例如。您的container宽度为960px，固定菜单宽度为300px，left: 50%，其空格为（960/2 - 300 = 180））在固定菜单的右侧。然后只需使用margin-left: 180px;

进行调整

Answer 6

“中心”页面（即内容+右侧面板）的一种方法是在制作右侧面板固定位置时调整边距。因此，如果您有div#content和div#rightPanel，则css可能类似于：

#content {
    margin-left: 15%;   /* left page margin */
    margin-right: 25%;  /* right page margin + rightPanel's width */
}

#rightPanel {
    position: fixed;

    top: 0;
    right: 15%;  /* right page margin */
    width: 10%;
}

确保#content的左边距与#rightPanel的右边距相同。

以下是一个示例：http://jsfiddle.net/william/ZruS6/1/。

使用浏览器的主滚动条滚动特定的DIV内容

6 个答案:

更新