我目前正在处理的网页只有一个主要内容div设置为固定大小。我想使用浏览器窗口滚动条而不是“in div”滚动条使其可滚动。
内容div大小为宽度：1076px，高度：475px
基本上我所做的是我在浮动div中有一个边缘淡化图像实际上在我的内容div上，所以如果我在div中使用滚动条，我将无法选择它或点击它因为浮动div的。所以我正在寻找一些帮助，让滚动条与我的布局一起使用。
我一直试图让这个工作用于我的页面，但我不知道该怎么做，尤其是我的布局。继承我的测试链接到我的页面：
http://184.66.76.75/gxwd_v2/
所以我正在寻找的是使用浏览器中的主滚动条滚动“maincontent”div及其固定大小。因此，当内容大于固定大小时，您可以向下滚动内容。使用我的布局，如果我在div中使用div滚动条。你不能滚动，因为div不是“活跃的”。不仅如此，你可以选择那个div，因为我的content_overlap div，它会漂浮在内容框上。
CSS文件：
body {
background-color: #000000;
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position: center;
margin: 0px auto;
padding: 0px;
color: #000000;
overflow: hidden;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 1076px;
height: 530px;
margin: 220px auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~ */
.menu {
width: 800px;
margin-left: 13%;
margin-right: 13%;
text-align: center;
}
.content {
padding: 0px 0px;
}
.content_overlap {
width: 1079px;
height: 504px;
background-image: url(images/fade.png);
background-position: top;
background-repeat: no-repeat;
position: absolute;
top: 252px;
left: 50%;
margin-left: -538px;
}
.maincontent {
position: relative;
top: 20px;
max-width: 1076px !important;
max-height: 460px !important;
overflow: auto;
padding: 0px 0px 0px 0px;
}
PHP文件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GuberX Web Development & Design</title>
<link rel="stylesheet" type="text/css" href="oneColFixCtr.css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4s.css" />
<link rel="stylesheet" media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css">
<meta name="viewport" content="initial-scale=0.5">
</head>
<body>
<div class="container">
<div class="content">
<div class="menu"><img src="images/menu/home-1.png"><img src="images/menu/spacer.png"><img src="images/menu/portfolio-1.png"><img src="images/menu/spacer.png"><img src="images/menu/services-1.png"><img src="images/menu/spacer.png"><img src="images/menu/contact-1.png"></div>
<div class="maincontent">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
Test Possition of Text and whatnot5<br />
Test Possition of Text and whatnot6<br />
Test Possition of Text and whatnot7<br />
Test Possition of Text and whatnot8<br />
Test Possition of Text and whatnot9<br />
Test Possition of Text and whatnot10<br />
Test Possition of Text and whatnot11<br />
Test Possition of Text and whatnot12<br />
Test Possition of Text and whatnot13<br />
Test Possition of Text and whatnot14<br />
Test Possition of Text and whatnot15<br />
Test Possition of Text and whatnot16<br />
Test Possition of Text and whatnot17<br />
Test Possition of Text and whatnot18<br />
Test Possition of Text and whatnot19<br />
Test Possition of Text and whatnot20<br />
Test Possition of Text and whatnot21<br />
Test Possition of Text and whatnot22<br />
Test Possition of Text and whatnot23<br />
Test Possition of Text and whatnot24<br />
Test Possition of Text and whatnot25<br />
Test Possition of Text and whatnot26<br />
Test Possition of Text and whatnot27<br />
Test Possition of Text and whatnot28<br />
Test Possition of Text and whatnot29<br />
Test Possition of Text and whatnot30<br />
</div>
</div><!-- end .content -->
<div class="content_overlap"></div> <!-- This div has a background image that has fading edges for the content box --!>
</div><!-- end .container -->
</body>
</html>
答案 0 :(得分：1)
浏览器窗口滚动条由浏览器“创建”，因此我认为您无法直接控制滚动条的位置或滚动页面的哪个部分。话虽如此，我认为通过滚动整个页面可以获得你想要的效果，但只是让它显示就像div正在滚动一样。
这可以通过创建一个“窗口”来完成，如果你愿意的话，用户“查看div with”。我很难解释这个想法，所以这里代码是：
<强> HTML
<div id="screenTop" class="screen"></div>
<div id="screenLeft" class="screen"></div>
<div id="screenRight" class="screen"></div>
<div id="screenBot" class="screen"></div>
<div id="container">
<div id="content">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
Test Possition of Text and whatnot5<br />
Test Possition of Text and whatnot6<br />
Test Possition of Text and whatnot7<br />
Test Possition of Text and whatnot8<br />
Test Possition of Text and whatnot9<br />
Test Possition of Text and whatnot10<br />
Test Possition of Text and whatnot11<br />
Test Possition of Text and whatnot12<br />
Test Possition of Text and whatnot13<br />
Test Possition of Text and whatnot14<br />
Test Possition of Text and whatnot15<br />
Test Possition of Text and whatnot16<br />
Test Possition of Text and whatnot17<br />
Test Possition of Text and whatnot18<br />
Test Possition of Text and whatnot19<br />
Test Possition of Text and whatnot20<br />
Test Possition of Text and whatnot21<br />
Test Possition of Text and whatnot22<br />
Test Possition of Text and whatnot23<br />
Test Possition of Text and whatnot24<br />
Test Possition of Text and whatnot25<br />
Test Possition of Text and whatnot26<br />
Test Possition of Text and whatnot27<br />
Test Possition of Text and whatnot28<br />
Test Possition of Text and whatnot29<br />
Test Possition of Text and whatnot30<br />
Test Possition of Text and whatnot31<br />
Test Possition of Text and whatnot32<br />
Test Possition of Text and whatnot33<br />
Test Possition of Text and whatnot34<br />
Test Possition of Text and whatnot35<br />
Test Possition of Text and whatnot36<br />
Test Possition of Text and whatnot37<br />
Test Possition of Text and whatnot38<br />
Test Possition of Text and whatnot39<br />
Test Possition of Text and whatnot40<br />
</div>
</div>
<强> CSS
.screen {
position: fixed;
background: black;
}
#screenTop, #screenBot {
height: 100px;
width: 100%;
}
#screenLeft, #screenRight {
height: 100%;
width: 100px;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }
#screenRight { right: 0; }
#screenBot { bottom: 0; }
#content { margin: 100px; }
<强> jsFiddle DEMO
从您提供的链接判断，我认为您可以将该想法纳入当前布局。这方面的缺点是，它依靠position: fixed来获得你想要的效果。基本上，您可以使用浏览器滚动条滚动整个页面，也可以使用div滚动条滚动div内容。
答案 1 :(得分：0)
此代码用于使用浏览器的主滚动条滚动body元素或div元素。您可以按切换按钮切换它们。它计算元素的高度超过身高并保存最后滚动位置。工作在chrome，firefox，即歌剧和野生动物园。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var scOpts = { st:0, bodyst:0, contst:0, rt1:1, rt2:1, bodyhei:0, p:0 };
$(document).ready(function() {
$(document).on('scroll', function(e) {
e.preventDefault();
scOpts.st = $(document).scrollTop();
var top = scOpts.st * scOpts.rt2;
if(scOpts.p == 1) $('#sc').scrollTop(top);
});
});
function switchContainer() {
if(scOpts.p == 0) {
var wnhei = $(window).height();
var schei = $('#sc').height();
scOpts.rt1 = document.getElementById('sc').scrollHeight / schei;
scOpts.rt2 = schei / wnhei;
var bh = (wnhei * scOpts.rt1);
scOpts.bodyhei = $('body').height();
scOpts.bodyst = scOpts.st;
$('#scont').css({ position:'fixed', overflow:'hidden' });
$('body').innerHeight(bh);
$('#scont').css('top', (scOpts.st * -1)/* + 50*/); // padding-top of body element
window.scrollTo(0, scOpts.contst);
} else {
scOpts.contst = scOpts.st;
$('#scont').css({ position:'static', overflow:'visible' });
$('body').height(scOpts.bodyhei);
window.scrollTo(0, scOpts.bodyst);
}
scOpts.p = (scOpts.p+1)%2;
}
</script>
<style>
html { margin:0; padding:0; }
body { margin:0; padding:0; overflow-y:scroll; }
#scont { height:100%; margin:0 auto; left:0px; right:0px; }
</style>
</head>
<body>
<div id="sc" style="position:fixed;left:10px; top:10px; width:300px;height:200px;overflow:hidden;border:1px solid #e1e2e3;background-color:#ffffff;">
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
</div>
<div id="scont">
<div style="height:750px;padding-top:350px;margin-left:30px;background-color:#fff000;">abcdefg</div>
</div>
<input type="button" value="Switch" onclick="switchContainer();" style="position:fixed;top:250px;">
</body>
</html>