Question

我在Chrome浏览器的网站上遇到了一些奇怪的问题，如果我有一个100％的jquery页面滚动停止工作。我无法移除身高：100％，因为这需要使.header类占页面的50％。 Firefox根本不受此问题的影响。我看过其他类似的问题，但没有帮助。

我在这里写了一个测试：http://codepen.io/anon/pen/bIHxc。

我已经尝试过这些东西让它在chrome中工作但是每个人都停止工作：

当前http://codepen.io/anon/pen/bIHxc - 标题是页面的50％（好）但滚动无法在Chrome中运行（错误）
尝试了min-height：100％而不是身高：100％身体css - 这允许滚动工作在chrome（好）但折叠标题（坏）
从位置更改#mainContainer css：relative;绝对 - 标题和滚动都工作（好），直到展开#sidebar（单击左上角的“打开”按钮）。 #mainContainer现在可以在移动设备或mac触控板上自由移动（非常糟糕！）。看起来好像overflow-x不起作用。

我试图在没有javascript的情况下这样做。我想做一些不可能的事吗？

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 1

我想我找到了解决方案。

我在整个网站上添加了一个#wrapper，并将overflow:hidden;从body和html移到了#wrapper。

#wrapper{
    height: 100%;
    overflow-x: hidden;
}

然后我将#wrapper添加到jQuery选择器

$(".click").click(function() {
  $('html, body, #wrapper').animate({ scrollTop: 0 }, "slow");
});

如果有兴趣的话，这是一个codePen：http://codepen.io/anon/pen/IwGcF

这似乎适用于Chrome移动版，Chrome桌面版和Firefox版。

Answer 2

如果可以，请尝试删除overflow-x: hidden;，或者在html元素上移动它，而不是在正文上。它似乎对我有用。

Answer 3

旧主题，但似乎设置：

html, body {
   min-height: 100%;
}

也应该这样做。我只是不确定如何通过浏览器确保这种行为： - /

身高100％的jQuery滚动问题

3 个答案: