Кажется, это известная проблема, я использую локальную прокрутку для прокрутки разделов ГОРИЗОНТАЛЬНО в div#content
, нажав #navigation ul li a
. Так что #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; }