代码之家 › 专栏 › 技术社区 › airportyh

如何设置浏览器滚动条以滚动页面的一部分?

css html javascript

airportyh · 技术社区 · 16 年前

我在一些网站上看到过,一个例子是 artofadambetts.com . 页面上的滚动条只滚动页面的一个元素,而不是整个页面。我看了一下来源,还没弄清楚。怎么做到的?

11 回复 | 直到 16 年前

Tom Ritter 16 年前

真漂亮。他在大多数沙发上使用“位置:固定”,而滚动的就是没有它的那个。

p4bl0 16 年前

实际上,不是滚动部分就是“做作业”,而是页面的固定部分。

为了做到这一点,您应该使用CSS并添加 position: fixed; 属性(用于 top , bottom , left 和/或 right 属性)到不希望滚动的元素。

你不应该忘记给他们一个更大的 z-index ,如果不这样做,可能会有一些滚动元素可以在滚动时覆盖您的固定元素(您当然不希望这样)。

Andrew Myhre 16 年前

要了解人们如何在CSS和/或JavaScript中执行这些操作,Firebug工具非常出色:

Firebug addon for Firefox

Dave Rutledge 16 年前

应该注意的是 further hacks 对于IE6来说,持仓不起作用,因为它仍然能够保持15-30%的市场份额,这取决于你的网站。

Anthony Williams 16 年前

您可以使用固定定位或绝对定位将各种元素绑定到页面上的固定位置。或者,可以指定一个固定大小的元素(如DIV)并使用 overflow: scroll 强制滚动条。

如前所述,在Internet Explorer和FireFox/Opera/Safari中运行一切需要明智地使用黑客。

Cetra 16 年前

这可以在CSS中使用“position:absolute;”子句完成。

下面是一个示例模板:

http://www.demusdesign.com/bipolar/index.html

从 http://www.demusdesign.com/

Adam Franco 16 年前

浏览器是滚动页面时,它的那一部分被固定在适当的位置。

这是通过在不希望滚动的部分使用“position:fixed”css属性来完成的。

Buzz 16 年前

他们已经通过css设置了侧元素和顶部元素的固定位置(参见style.css文件的第94行)。这将在其余部分滚动时在视区中保存它们。

sumit pandey 13 年前

试着滚动网页的特定部分……

 <html>
      <head>
      <title>Separately Scrolled Area Demo</title>
        </head>
          <body>
              <div style="width: 100px; border-style: solid">

            <div style="overflow: auto; width: 100px; height: 100px">
                        sumit..................
                        amit...................
                        mrinal.................
                        nitesh................
                        maneesh................
                        raghav...................
                        hitesh...................
                        deshpande................
                        sidarth....................
                        mayank.....................
                        santanu....................
                        sahil......................
                        malhan.....................
                        rajib.....................
                         </div>
                      </div>
                  </body>
      </html>

thanksd thibaut noah 9 年前

对于DIV,您可以添加CSS

overflow: auto

例如,

<div style="overflow:auto; height: 500px">Some really long text</div>

编辑:在查看了你发布的站点之后,你可能不想要这个。他在自己的网站上所做的就是使布局固定(位置:固定),并为其分配一个比文本更高的z索引,即更低的z索引。

例如:

<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.&lt/div>

用CSS文件

div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}

-3

Adam Rosenfield 16 年前

要将滚动条放到DIV等元素上,请执行以下操作:

<div style="overflow-x: auto; overflow-y: auto;>the content</div>

如果您只需要一个水平或垂直滚动条,请使用您需要的overflow-x和overflow-y。