仅一格的滚动条
[英]Scrollbar in one div only
问题描述
举例来说，我有两个divs如下所示：
<body>
<div id="header">
MY CONTENTS
</div>
<div id="main">
MY OTHER CONTENTS
</div>
</body>
第一个div具有position:fixed;属性position:fixed; width:100%; 在CSS中，另一个div只是内部包含很多内容的div。
好的，像往常一样，在右侧有一个滚动条。 但是此滚动条会影响所有divs 。 我希望滚动条仅影响第二个div ，可能吗？
我尝试了用overflow:auto ， overflow:hidden和overflow:scroll但是我没有达到目标……
编辑 ：这是我的jsfiddle： http : //jsfiddle.net/upcfp/
5 个解决方案
解决方案1
0 2012-07-16 22:06:46
尝试：
#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/
解决方案2
0 2012-07-16 22:24:56
你想做这样的事情吗？
我编辑了您的jsfiddle，并删除了一些您不需要的部分：
好像有一个
</div>
#header中缺少，但这是您想要得到的吗？
解决方案3
0 2012-07-16 22:32:54
这就是您的想法吗？
这是一个简单的方法。 我将标题放在顶部，绝对定位在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;
}
这是您使用我的解决方案的小提琴。
解决方案4
0 已采纳 2012-07-17 11:04:43
好的，我解决了我的问题，我使用了以下代码：
body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}
我在#main的内容中指定了高度，它工作了，谢谢大家！
解决方案5
0 2015-08-01 01:27:03
这是一个完美的解决方案，但是我不知道如何将代码格式保留在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 中自定义滚动条
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.