div滚动主滚动条 [英] div scroll with main scrollbar
问题描述
我目前工作的网页只有一个主要内容div，设定为固定大小。
My webpage i am currently working on only has one main content div that is set to a fixed size. I would like to make it scrollable with the browser window scroll bar and not the "in div" scroll bar.
内容div大小是宽度：1076像素，高度：475像素
content div size is width: 1076px, height: 475px
基本上我做的是我有一个边缘渐变图像在一个浮动的div实际上在我的内容div，所以如果我要使用div内的滚动条，我会无法选择它或点击它，因为浮动div。所以我寻找一些帮助，以获得一个滚动条来处理我的布局。
basicly what I have done is I have a edge fading image in a floating div actually over my content div so if I were to use the scroll bar inside the div, I would not be able to select it or click on it because the of the floating div. So im looking for some help to get a scroll bar to work with my layout.
我一直在试图让这个为我的页面工作，但我不知道如何去做这个，特别是我的布局。我的测试链接到我的页面：
I have been trying to get this to work for my page, but I dont know how to go about doing this, especially with my layout. heres my test link to my page:
http://184.66.76.75/gxwd_v2/
所以我要找的是使用主滚动条从浏览器滚动maincontentdiv与其固定大小。因此当内容大于固定大小时，您可以向下滚动内容。有了我的布局，如果我是使用div滚动条里面的div。你不能滚动，因为div不是活动。不仅如此，您可以选择该div，因为我的content_overlap div，它浮在内容框上。
So what I'm looking for is to use the main scroll bar from browser to scroll the "maincontent" div with its fixed size. so when content is larger than fixed size you can scroll the content down. With my layout, if i was to use the div scroll bar inside div. you can't scroll because the div is not "active". not only that, you can select that div because of my content_overlap div, it floats over the content box.
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>
推荐答案
浏览器窗口滚动条是浏览器，所以我不认为你将能够直接控制滚动条的位置或页面的哪个部分滚动。话虽如此，我认为可以通过滚动整个页面来获得你想要的效果，但只是让它出现，就好像div正在滚动。
The browser window scroll bar is "created" by the browser, so I don't think you will be able to directly control where the scroll bar is or what part of your page it scrolls. Having said that, I think it is possible to get the effect you want by scrolling the whole page, but only making it appear as if a div is scrolling.
这可以通过创建一个窗口，如果你会，用户看看 div 与。我很难解释这个想法，因此代码如下：
This can be done by creating a "window", if you will, that the user "looks into the div with". It's difficult for me to explain the idea, so instead here is the code:
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内容。
Judging from the link you provided, I think you might be able to incorporate the idea into your current layout. The downside to this though is that it relies on position: fixed to get the effect you want. Basically, you can either scroll the whole page with the browser scroll bar, or you can scroll the div content with the div scroll bar.
这篇关于div滚动主滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
