4

比如说，我有两个divs这样的：

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

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

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

overflow:auto我用,尝试了一切overflow:hidden，overflow:scroll但我没有达到我的目标......

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

4

5 回答 5

0

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

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

我在#main 的内容中指定了高度，它刚刚工作，感谢大家！

于 2012-07-17T11:04:43.423 回答
0

尝试：

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

于 2012-07-16T22:06:46.423 回答
0

你想做这样的事情吗？

jsfiddle 示例 1

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

你的jsfiddle的编辑版本

好像有一个

</div>

#header 中缺少，但这是您想要得到的吗？

于 2012-07-16T22:24:56.267 回答
0

这是你的想法吗？

这是一个简单的方法。我的标题在顶部，绝对定位，高度为 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;
}​

这是您使用我的解决方案的小提琴。

于 2012-07-16T22:32:54.380 回答
-1

这是一个完美的解决方案，但我不知道如何在 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>
于 2015-08-01T01:27:03.460 回答