Javascript jquery localscroll溢出问题
这似乎是一个已知的问题,我正在使用localscroll插件,通过单击Javascript jquery localscroll溢出问题,javascript,jquery,css,overflow,Javascript,Jquery,Css,Overflow,这似乎是一个已知的问题,我正在使用localscroll插件,通过单击#导航ul li a,在div#content中水平滚动部分。因此#content是一个溢出:隐藏的div。最初#content位于页面中央,这意味着窗口顶部与content之间有一个空格。每当单击其中一个#导航ul li a时,哈希值都会更改,因为我为插入设置了hash:true,因为我仍然想使用后退按钮。问题是此锚定标记更改会将内容向右滚动到#content,并将顶部空间裁剪出来。这里似乎有相互矛盾的力量在起作用。如何使#
#导航ul li a
,在div#content
中水平滚动部分。因此#content
是一个溢出:隐藏的div。最初#content
位于页面中央,这意味着窗口顶部与content
之间有一个空格。每当单击其中一个#导航ul li a
时,哈希值都会更改,因为我为插入设置了hash:true
,因为我仍然想使用后退按钮。问题是此锚定标记更改会将内容向右滚动到#content
,并将顶部空间裁剪出来。这里似乎有相互矛盾的力量在起作用。如何使#内容保持在中心位置。结构如下:
<div id="container">
<div id="top"></div>
<div id="floater></div>
<div id="content">// this is centered on screen originally, but it will just keep on top after the scroll and cropping the whole space on top
<div class="section"><ul id="1">content 1</ul></div>
<div class="section"><ul id="2">content 2</ul></div>
<div class="section"><ul id="3">content 3</ul></div>
<div class="section"><ul id="4">content 4</ul></div>
</div>
<div id="navigation">
<ul>
<li><a href='#1'>1</a></li>
<li><a href='#2'>2</a></li>
<li><a href='#3'>3</a></li>
<li><a href='#4'>4</a></li>
</ul>
</div>
</div>
更新:以下是一些css:
html, body { height:100%; margin:0; padding:0; }
#container { height:100%; min-width: 900px; min-height:630px; background:#dddbd9 url('../images/bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; }
#top { position:relative; float:right; width:100%; text-align:center; height: 0;}
#floater { height:50%; margin-bottom: -300px; position:relative; width: 1px; }
#content { clear:both; height:345px; position:relative; margin:0 auto; width:790px; padding:20px; overflow:hidden; }
你也可以发布你的CSS吗?谢谢,我添加了CSS并更新了html结构。谢谢,你的html中有一些错误(缺少引号,
标签打开,里面没有
标签,属性和等号之间有空格(例如
),尝试修复这些,它可能会修复问题。您的#content
div也有错误,id应该是content
而不是#content
,谢谢您的评论,但所有这些都是小格式问题,在实际代码中不存在,我只是试图解释问题。但我在再次感谢你指出这个问题。
html, body { height:100%; margin:0; padding:0; }
#container { height:100%; min-width: 900px; min-height:630px; background:#dddbd9 url('../images/bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; }
#top { position:relative; float:right; width:100%; text-align:center; height: 0;}
#floater { height:50%; margin-bottom: -300px; position:relative; width: 1px; }
#content { clear:both; height:345px; position:relative; margin:0 auto; width:790px; padding:20px; overflow:hidden; }