Question

比如说，我有两个divs，如此：

<body>
    <div id="header">
        MY CONTENTS
    </div>
    <div id="main">
        MY OTHER CONTENTS
    </div>
</body>

第一个div在CSS中有position:fixed;和width:100%;属性，另一个div只是一个内容很多的div。

好的，像往常一样，右侧有一个滚动条。但是此滚动条会影响所有divs。我希望滚动条仅影响第二个div，可能吗？

我使用overflow:auto，overflow:hidden和overflow:scroll尝试了所有内容，但我没有达到目标......

编辑：这里是我的jsfiddle：http://jsfiddle.net/upcfp/

Answer 1

尝试：

#div2 {
  overflow-y: scroll;
}

这只会在需要时放置滚动条。要始终显示它们，请使用overflow-y: scroll;。我已将第二个div的ID加上div作为前缀，因为您不应该只使用ID或属性的数字。

#表示该规则将应用于ID为#之后的元素。如果您希望它应用于所有div，那么您将使用类。

演示：http://jsfiddle.net/6EVtN/

没有看到更多代码，问题可能是由于浏览器兼容性。上面的示例在Mozilla Firefox 13.0.1和IE 8中进行了测试。

更新演示：http://jsfiddle.net/j4uAM/

Answer 2

你想做那样的事吗？

jsfiddle Example 1

我编辑了你的jsfiddle并删除了一些不需要的部分：

edited version of your jsfiddle

似乎有一个

</div>

缺少#header，但这是你想得到的吗？

Answer 3

this你的想法是什么？

这是一种简单的方法。我的顶部是标题，绝对定位，高度为100像素。在下面，我有主要内容区域，高度为100％，透明顶部边框为100像素（因此内容显示在绝对定位的标题下方）。

CSS中的box-sizing属性允许我们将整个元素放入我们指定的宽度和高度，包括填充和边框。因此，包括顶部边框，主要内容的高度为100％，滚动条仅显示在主内容div上。

顺便说一句，这里的诀窍是将html和body的高度设置为100％。否则这不会起作用。

CSS：

html,body {
    height:100%;
}
#header {
    position:absolute;
    width: 100%;
    height: 100px;
    background:#c3c3c3;
    z-index:1;
}
#main {
    background: #eee;
    height:100%;
    border-top:100px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow:auto;
}

使用我的解决方案

Here是你的小提琴。

Answer 4

好的，我解决了我的问题，我使用了这段代码：

body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}

我在#main的内容中指定了高度，感谢所有人，它只是起作用了！

Answer 5

这是一个完美的解决方案，但我不知道如何在stackoverflow中保留代码格式：

<script>
$("#cart").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("cart").scrollHeight;
var intElemClientHeight = document.getElementById("cart").clientHeight;
if( intElemScrollHeight - $("#cart").scrollTop() === intElemClientHeight) {
    $(document).bind("mousewheel", function(event) {
        event.preventDefault();
    });
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
    if($("#cart").scrollTop() != 0) {
        $(document).unbind("mousewheel"); 
    } else {
        event.preventDefault();
    }
}});
$("#cart").on("mouseleave", function(event) {
   $(document).unbind("mousewheel");
});
</script>

仅一个div中的滚动条

5 个答案: