滚动条在一个DIV只有

说，例如，我有像两个divs这样：滚动条在一个DIV只有

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

第一div具有的属性position:fixed;和CSS width:100%;，其他div仅仅是一个内部的很多内容DIV 。

好的，像往常一样，在右侧有一个滚动条。但是这个滚动条影响所有的divs。我想滚动条只影响第二个div，有可能吗？

我什么都试过与overflow:auto，overflow:hidden和overflow:scroll但我没有达到我的目标......

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

来源

2012-07-16 Antonio Pitasi

能为您提供的jsfiddle例子吗？很难猜测发生了什么事情没有工作的例子 – haynar 2012-07-16 22:13:21

编辑和添加 – 2012-07-16 22:23:27

好吧，我解决我的问题，我用这个代码：

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

我指定的高度#main的内容，它只是工作，感谢大家！

来源

2012-07-17 11:04:43

尝试：

#div2 { 
    overflow-y: scroll; 
}

这将只在需要时放置滚动条。要始终使用overflow-y: scroll;来显示它们。我在第二个div的前缀div前加上了前缀，因为一般情况下不应该只使用数字来表示ID或属性。

#表示该规则将应用于ID为#后面的元素。如果你想要它适用于所有div，那么你会使用类。

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

没有看到更多的代码，该问题可能是由于浏览器的兼容性。上面的例子是在Mozilla Firefox 13.0.1和IE 8.

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

来源

2012-07-16 22:06:46 RobB

噢，是的，数字只是为例... 我试过你说的，但它没有工作... – 2012-07-16 22:10:03

我尝试在Safari，Chrome， Firefox，但结果是一样的，你在jsfiddle的例子有效，但在我的网站不是 – 2012-07-16 22:29:40

@AntonioPitasi我已经用另一个基于你的代码的链接更新了我的答案。看看它，让我知道你是否能够看到滚动条。 – RobB 2012-07-17 03:40:47

你想要做这样的事情？

jsfiddle Example 1

我编辑您的jsfiddle并删除了一些对你的问题并不需要几部分组成：

edited version of your jsfiddle

好像有一个

</div>

在＃失踪头，但那是你想要得到什么？

来源

2012-07-16 22:24:56 r3bel

是的，我不希望滚动条在绿色div上，我只想在蓝色div中的滚动条 – 2012-07-16 22:26:36

是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是用我的解决方案的小提琴。

来源

2012-07-16 22:32:54 Purag

正好，但是如果我为body标签写了'overflow：hidden'，滚动条消失，我不能滚动内容虽然我为主分区写了'overflow：auto' ... – 2012-07-16 22:39:28

@AntonioPitasi：在body标签中加入overflow：hidden不会在这里做任何事情。 – Purag 2012-07-16 22:40:15

溢出：隐藏到身体标签显式隐藏最终显示在浏览器窗口中的滚动条据我所知 – r3bel 2012-07-16 22:46:06

这是一个完美的解决方案，但我不知道如何保持代码格式计算器：

<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-01 01:27:03

请不要在多个问题上发布相同的答案。发布一个很好的答案，然后投票/标记以重复关闭其他问题。如果问题不是重复的， – kleopatra 2015-08-01 09:04:54

滚动条在一个DIV只有

回答

相关问题