Menu
I'm getting some weird issues on my website in Chrome where if I have a body of 100% jquery page scrolling stops working. I can't remove body height:100% as this is needed to make the .header class 50% of the page. Firefox is not effected by this issue at all. I've looked at other similar questions but non help.
I've written up a test here: http://codepen.io/anon/pen/bIHxc.
.
I've tried these things to get it to work in chrome but each one stops something else from working:
Current http://codepen.io/anon/pen/bIHxc - Header is 50% of page (good) but scrolling fails to work in Chrome (bad)
tried min-height:100% instead of height:100% in body css - This allows scrolling to work in chrome (good) but collapses the header (bad)
Change #mainContainer css from position: relative; to absolute - Both header and scrolling work (good) until you expand the #sidebar (click the Open button top left). The #mainContainer can now be moved freely especially noticeable on mobile or with a mac trackpad (very bad!). It looks as if overflow-x isn't working or something.
I'm trying to do this without javascript. Am I trying to do something impossible?
.
Stuff required by stackoverflow
<!DOCTYPE html>
<html>
<head>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
overflow-x: hidden;
}
html {
height: 100%;
}
body {
height: 100%;
}
#sideBar {
background: red;
position: fixed;
height: 120%;
width: 200px;
}
#mainContainer {
-webkit-transition:transform 0.4s ease, margin 0.4s ease;
-moz-transition:transform 0.4s ease, margin 0.4s ease;
background: blue;
z-index: 1000;
position: relative;
margin-left: 70px;
height: 100%;
}
nav {
width:100%;
height: 100%;
background:purple;
position: relative;
-webkit-transition:width 0.4s ease;
-moz-transition:width 0.4s ease;
}
#mainNavCheck:checked ~ #mainContainer {
-webkit-transform:translate3d(130px, 0, 0);
-moz-transform:translate3d(130px, 0, 0);
}
#mainNavCheck:not(:checked) ~ #sideBar span {
color:blue;
}
.content {
background:grey;
}
.header {
height: 50%;
background: lime;
}
#mainNavCheck {
position:absolute;
left:-999px;
visibility: hidden;
}
h1 {
padding: 0;
margin: 0;
}
</style>
<head>
<body>
<input type="checkbox" id="mainNavCheck" />
<div id="sideBar">
<nav>
<label for="mainNavCheck" class="togglemenu">OPEN</label>
<div class="click">ScrollUp</div>
</nav>
</div>
<div id="mainContainer">
<div class="header">
header - 50% height of browser window
</div>
<div class="content">
<h1>This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. </h1>
<div class="click">
<br /><br /><br /><br /><br />
ScrollUp
</div>
</div>
</div>
<script>
$(".click").click(function() {
$('html, body').animate({ scrollTop: 0 }, "slow");
});
</script>
</body>
</html>
785
I think I've found a solution.
I've added a #wrapper around the whole website and moved overflow:hidden; from body and html to #wrapper.
#wrapper{
height: 100%;
overflow-x: hidden;
}
Then I added #wrapper to the jQuery selector
$(".click").click(function() {
$('html, body, #wrapper').animate({ scrollTop: 0 }, "slow");
});
Here is a codePen if anyone's interested: http://codepen.io/anon/pen/IwGcF
This seems to work well on Chrome mobile, Chrome desktop and firefox.
54
Try to remove your overflow-x: hidden; if you can or move it on the html element, not on the body.
It seems to work for me.
24
Old topic, but it seems that setting:
html, body {
min-height: 100%;
}
should do the trick as well. I am just not sure on how to assure this behaviour cross browser :-/
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
