Reputation: 45
div scroll with main scrollbar
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.
content div size is width: 1076px, height: 475px
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/
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 File:
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 file:
<!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>
Upvotes: 4
Views: 9577
Answers (2)
Reputation: 19
This code is for scrolling of body element or a div element with browser's main scrollbar. You can switch between them pressing to Switch button.It calculates element's height over body height and saves the last scroll position.Works in chrome, firefox, ie, opera and safari.
<!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>
Upvotes: 0
Reputation: 14747
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.
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; }
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.
Upvotes: 2
Related Questions
- Scroll only one div's content with main scrollbar
- CSS : start scroll bar from specific div
- Making a Div Scrollable
- Scrollbar in DIV
- scrollbar in main div to display divs within it
- Scrollbar on top of div
- Scroll 2 DIV contents + main content with browser's main scrollbar
- Scroll page not div CSS only
- Div has scroll bar
- Scroll particular DIV contents with browser's main scrollbar