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

Question

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

htmlcss

35

我正在设计我的网站的新布局，看到了GIZMODO网站，发现他们的网站可以利用页面滚动条来滚动部分内容。他们是如何做到这一点的？我通过 Firebug 查看了他们的 CSS，但是感到很困惑。

这是我的测试页面1：http://raptor.hk/dev/theme/dummy.html（此页面可以将内容居中，但无法像我想要的那样滚动）

这是我的测试页面2：http://raptor.hk/dev/theme/dummy2.html（此页面可以按照我想要的方式滚动，但无法居中）

我只想让左侧内容随着页面滚动条滚动，而右侧内容保持原位，同时整个网站应该居中对齐，即将我的测试页面1和2合并。有人可以给我一些提示吗？

- Raptor

共享链接已经失效，无法使用。 - Kamlesh

哦，已经是9年前的事了。抱歉，链接已不再可用。 - Raptor

6个回答

5

我误解了你的问题，我以为你想要主滚动条也可以滚动另一个div中的内容。好的，这里是：

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

Demo: http://jsfiddle.net/AlienWebguy/c3eAa/

- AlienWebguy

3

您可以使用 position:fixed 来实现。以下是 GIZMODO 样式表中相关部分的内容：

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

- Jakub Roztocil

我还有另一个问题，如果我想要让内容居中，我该怎么调整CSS？（请查看问题中新更新的链接） - Raptor

3

这种技术在许多网站上都可以看到。它的作用是将右侧屏幕上的 div 元素设置为 position: fixed，这样它就不会受到页面滚动的影响。

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>

- Ibu

我有两个演示页面（请参见更新的问题），但我无法将它们合并在一起，您能给我一些提示吗？ - Raptor

0

我猜你是在寻找类似这样的东西。

http://jsfiddle.net/RnWdh/

请注意，您可以随意更改#main_content的宽度，只要它不会“隐藏”在您的固定菜单后面，否则您的文本将消失。

让固定菜单位于居中容器的右侧的技巧是使用left: 50%和margin-left来正确调整它。

例如，您有一个container宽度为960px，固定菜单宽度为300px，带有left: 50%，那么固定菜单右侧将有一个白色空间（960/2-300 = 180）。然后只需使用margin-left: 180px;进行调整即可。

- martnu

0

将页面（内容+右侧面板）“居中”的一种方法是在使右侧面板固定位置的同时调整边距。因此，如果您有一个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/。

- William Niu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NGLN · Accepted Answer

虽然您的 Gizmodo 示例使用了额外的脚本来处理侧边栏（竖直滚动条）（在某些浏览器中甚至无法正常工作），但这种效果完全可以使用纯 CSS 实现，而且并不像乍一看那么难。

因此，您需要：

水平居中的布局，可能会随着不同浏览器窗口大小而变宽或变窄
左侧的主要内容由浏览器的主滚动条垂直滚动
右侧的侧边栏固定在浏览器窗口顶部，可以单独滚动，只有当鼠标悬停在上面时才显示其滚动条。滚动到侧边栏末尾时，将采用窗口的滚动条。

查看此 演示 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>

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

我假设主内容具有流式宽度，而侧边栏具有静态宽度，但两者都可以像您喜欢的那样完全流动。如果您想要一个静态宽度，请参见 此演示fiddle，这会使标记更加简单。

更新

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

我认为这个新的演示fiddle可以满足您的需求：

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