Cześć,
Tworzę stronę internetową, która ma następującą strukturę:
<div id="wrapper" style="width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow-x:hidden;
">
<div id="mask" style="width:500%; ">
<div id="section-1" class="item" style="width:20%; float:left;"> </div>
<div id="section-2" class="item" style="width:20%; float:left;"> </div>
<div id="section-3" class="item" style="width:20%; float:left;"> </div>
<div id="section-4" class="item" style="width:20%; float:left;"> </div>
<div id="section-5" class="item" style="width:20%; float:left;"> </div>
</div>
</div>
Dzięki temu uzyskuję to, że strona może przewijać się w boki na czym bardzo mi zależy.
Na tej stronie są zastosowane kotwice w celu płynnego przejścia w prawo w lewo góra dół.
W tym celu dla każdej kotwicy mam następujący kod jquery:
jQuery('#uslugi').click(function () {
var page = $(this).attr('href');
var params = {
duration: 1500,
easing: 'swing'
};
$.scrollTo(page, params);
return false;
});
Mój problem polega na tym, że gdy mam włączony overflow-x:hidden; to te płynne przejścia nie działają. Natomiast gdy zakomentuję overflow-x:hidden; wszystko działa jak należy.
Czy da się zrobić tak, aby przy overflow-x:hidden działał mój kod jquery?
Proszę o jakieś wskazówki do rozwiązania problemu. Dodam że jestem początkujący w tym temacie.
Mniej więcej to tak wygląda. Nie wiem czy dobrze dołączyłem tutaj te biblioteki.
http://jsbin.com/qicekajedi/1/edit?html,css,js,output