Question

我在一些网站上看到过这种情况，例如artofadambetts.com。页面上的滚动条仅滚动页面的一个元素，而不是整个页面。我查看了源代码，但还没有弄明白。这是怎么做到的？

Answer 1

那太漂亮了。他在大多数div上使用“position：fixed”，而滚动的则是没有它的那个。

Answer 2

实际上，滚动部分不是“完成工作”，而是页面的固定部分。

为了做到这一点，您应该使用CSS并添加position: fixed;属性（与top，bottom，left和/或right一起使用属性）到你不想滚动的元素。

你不应该忘记给他们一个更大的z-index，如果你不这样做，滚动时可能会有一些滚动元素可以覆盖你的固定元素（你当然不想要这一点）。

Answer 3

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

Firebug addon for Firefox

Answer 4

应该注意的是，没有further hacks位置修复不适用于IE6，IE6仍然可以保留15-30％的市场份额，具体取决于您的网站。

Answer 5

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

如前所述，让所有内容在Internet Explorer和Firefox / Opera / Safari中运行都需要明智地使用黑客攻击。

Answer 6

对于div，您可以添加cSS

overflow: auto

例如，

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

编辑：在查看您发布的网站后，您可能不希望这样。他在他的网站上做的是使布局固定（位置：固定）并为其指定比文本更高的z索引，这是更低的z-index。

例如：

<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.</div>

使用css文件

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

Answer 7

这可以使用“position：absolute;”在CSS中完成条款

以下是一个示例模板：

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

来自http://www.demusdesign.com/

Answer 8

浏览器滚动页面，只是它的一部分固定在适当的位置。

这是通过在您不想滚动的部分使用“position：fixed”CSS属性来完成的。

Answer 9

他们通过CSS将侧面和顶部元素设置为固定位置（参见style.css文件的第94行）。这将它们保存在视口中，而其余部分滚动。

Answer 10

尝试使用此功能滚动网页的特定部分......

 <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>

Answer 11

将滚动条放在div之类的元素上：

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

如果您只想要水平或垂直滚动条，只需使用您需要的overflow-x和overflow-y中的任何一个。

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

11 个答案: