Question

这似乎是一个已知问题，我点击div#content使用localscroll插件在#navigation ul li a中滚动HORIZONTALLY部分。所以#content是overflow: hidden div。最初#content以页面为中心，这意味着窗口顶部与content之间存在空格。每当点击#navigation ul li a中的一个时，哈希就会改变，因为我为插件设置hash: true我仍然想要使用后退按钮。问题是这个锚标记更改会在#content上滚动内容，并将顶部空间裁剪掉。这里的行动看起来很矛盾。如何让#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>

设置localscroll：

$.localScroll.defaults.axis = 'xy';

$.localScroll.hash({
        target: '#content',
        queue:true,
        duration:1500
    });

$.localScroll({
    target: '#content',
    queue:true,
    duration:1000,
    hash:true,
    onBefore:function( e, anchor, $target ){
    },
    onAfter:function( anchor, settings ){
    }
});

更新：这里有一些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; }

jquery localscroll溢出问题

0 个答案: