javascript - 禁用标题中的滚动条，但不在网页内容中

Question

我有一个带有标题和内容的简单网页，它可能看起来像

<div id="wrap">
    <div id="header">
    </div>
    <div id="content">
    </div>
</div>

默认情况下，它在右侧有一个滚动条，但我想禁用/冻结标题中的滚动条，但将其保留在内容中，是否可以通过 javascrip/jquery 或 css 执行此操作？

谢谢

前

后

Answer 1

您可以通过给内容一个固定的高度，并设置overflow-y: scroll.

示例：http: //jsfiddle.net/XLaVa/

Answer 2

你将不得不重组你的 html/css：

<div id='wrap'>
   <div id='header'></div>
   <div id='content-outer'>
      <div id='content-inner'>
      </div>
   </div>
</div>

CSS：

.content-outer {
   height: 600px; /* or desired height */
   overflow-y: scroll;
}
.content-inner {
   height: auto;
}

Answer 3

overflow:hidden在 CSS 中为标题和内容设置overflow:scroll。

Answer 4

添加这些 CSS 规则：

#header { overflow: hidden; }
#content { overflow: auto; }

您还需要限制内容的高度，以免页面本身溢出。

Answer 5

如果您想向内容元素本身添加滚动条，请查看其他答案。要通过浏览器的滚动条达到类似的效果，请尝试position:fixed标题：

#header {
    position : fixed;
    top : 0px;
    width : 100%;
    height : 30px;
    background-color:white;
}
#content{
    margin-top : 30px;
}

演示：http: //jsfiddle.net/GUeUe/

（注意：IE <=6 不支持position:fixed.）