jQuery Scrolling issue with body height 100%

2019-04-29 22:03发布

站内问答 / jQuery
776 3 5

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>

3条回答
姐就是有狂的资本
2楼-- · 2019-04-29 22:11

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 :-/

查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-04-29 22:33

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.

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
4楼-- · 2019-04-29 22:33

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)