我在我的 Chrome 网站上遇到了一些奇怪的问题，如果我有一个 100% jquery 页面滚动停止工作。我无法删除 body height:100%，因为这是使 .header 类占页面的 50% 所必需的。 Firefox 完全不受此问题的影响。我看过其他类似的问题，但没有帮助。
我在这里编写了一个测试:http://codepen.io/anon/pen/bIHxc .
.
我已经尝试了这些方法来让它在 chrome 中工作，但每一个都会阻止其他东西工作:
当前 http://codepen.io/anon/pen/bIHxc - 页眉占页面的 50%(好)但滚动在 Chrome 中无法正常工作(坏)
尝试在 body css 中使用 min-height:100% 而不是 height:100% - 这允许滚动在 chrome 中工作(好)但折叠标题(坏)
从 position: relative 更改 #mainContainer css；绝对 - 在展开#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>
最佳答案
我想我找到了解决方案。
我在整个网站周围添加了一个 #wrapper，并将 overflow:hidden; 从 body 和 html 移动到 #wrapper。
#wrapper{
height: 100%;
overflow-x: hidden;
}
然后我将#wrapper 添加到 jQuery 选择器
$(".click").click(function() {
$('html, body, #wrapper').animate({ scrollTop: 0 }, "slow");
});
如果有人感兴趣，这里有一个代码笔:http://codepen.io/anon/pen/IwGcF
这似乎在 Chrome 移动版、Chrome 桌面版和 Firefox 上运行良好。
关于 body 高度为 100% 的 jQuery 滚动问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25164421/