Jam*_*mer 5 html css jquery scroll google-chrome
我在我的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>
我想我找到了解决方案.
我在整个网站上添加了一个#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版.
| 归档时间： |
|
| 查看次数： |
7560 次 |
| 最近记录： |