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

【问题标题】：How to set up the browser scrollbar to scroll part of a page?如何设置浏览器滚动条来滚动页面的一部分？
【发布时间】：2010-09-10 03:20:55
【问题描述】：

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

对于一个 div，你可以在 cSS 中添加

overflow: auto

例如，

一些很长的文字

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

例如：

//把随机的东西放在这里。会修复的

把你想滚动和定位的东西放在这里。&lt/div>

带有css文件

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

需要注意的是，如果不固定further hacks 位置，IE6 将无法正常工作，IE6 仍能保持 15-30% 的市场份额，具体取决于您的网站。

【讨论】：

【解决方案5】：

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

Firebug addon for Firefox

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

这是一个示例模板：

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

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

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

在一个元素上放置滚动条，例如一个 div：

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

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

【讨论】：