6

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

4

11 回答 11

9

这很漂亮。他在大多数 div 上都使用了“position:fixed”，而滚动的就是没有它的那个。

于 2008-09-17T13:35:06.560 回答
4

事实上，“做这项工作”的不是滚动部分，而是页面的固定部分。

为此，您应该使用 CSS 并向您不希望滚动的元素添加position: fixed;属性（与top、bottom和left/或属性一起使用）。right

而且你不应该忘记给他们一个更大的z-index，如果你不这样做，可能有一些滚动元素可以在你滚动时越过你的固定元素（你当然不希望这样）。

于 2008-09-17T13:38:07.083 回答
1

要了解人们如何在 CSS 和/或 Javascript 中做这些事情，Firebug 工具非常出色：

Firefox 的 Firebug 插件

于 2008-09-17T13:40:48.823 回答
1

应该注意的是，如果没有进一步的黑客攻击，IE6 的定位将无法正常工作，IE6 仍能保持 15-30% 的市场份额，具体取决于您的网站。

于 2008-09-17T13:42:39.020 回答
1

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

如前所述，让一切在 Internet Explorer 和 Firefox/Opera/Safari 中运行需要明智地使用 hack。

于 2008-09-17T13:46:25.657 回答
0

对于 div，您可以在 cSS 中添加

overflow: auto

例如，

<div style="overflow:auto; height: 500px">一些很长的文字</div>

编辑：查看您发布的网站后，您可能不想要这个。他在他的网站中所做的是将布局设置为固定（位置：固定）并为其分配比文本更高的 z-index，即较低的 z-index。

例如：

<div class="highz"> //在这里放随机的东西。会修复的</div>
<div class="lowz"> 把你想滚动和定位的东西放在这里。</div>

带有 css 文件

div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
于 2008-09-17T13:35:01.253 回答
0

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

这是一个示例模板：

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

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

于 2008-09-17T13:35:48.680 回答
0

浏览器正在滚动页面，它只是它的那一部分是固定的。

这是通过在您不希望滚动的部分上使用“位置：固定”CSS 属性来完成的。

于 2008-09-17T13:36:21.220 回答
0

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

于 2008-09-17T13:36:45.493 回答
0

试试这个滚动网页的特定部分......

 <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>
于 2011-11-29T07:00:55.373 回答
-3

要在 div 等元素上放置滚动条：

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

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

于 2008-09-17T13:34:41.100 回答