Scrollto nie działa przy overflow:hidden

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

http://jsbin.com/dozixayuja/edit?html,output dokończ ten przykład tak, żeby dało się zobaczyć Twój problem, teraz masz szczątki kodu, które NIE umożliwiają jego uruchomienia, a nie chce mi się tracić 80% czasu na próby zduplikowania problemu, a 20% na rozwiązywanie go.