Jammer Jammer - 3 months ago 11
CSS Question

jQuery Scrolling issue with body height 100%

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:


  1. Current http://codepen.io/anon/pen/bIHxc -
    Header is 50% of page (good) but scrolling fails to work in Chrome (bad)

  2. tried min-height:100% instead of height:100% in body css -
    This allows scrolling to work in chrome (good) but collapses the header (bad)

  3. 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>

Answer

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.