One page- skrollowanie strony do kolejnej sekcji z jednym dużym tłem

Question

Witam. Bardzo prosiłbym o pomoc/porade w stworzeniu gładkiego przejscia podczas skrolowania do danej sekcji. Przy czym sekcja nr. 1 posiada swoj osobny background, a pozostałe 2, 3 i 4 posiadają jeden wspolny duzy background (przykladowo o wysokosci 300vh).  
 

<div class="section custom-full1">1</div>
<main>
  <div class="section">2</div>
  <div class="section">3</div>
  <div class="section">4</div>
</main>

Mainowi chciałbym dać background o wysokosci 300vh w taki sposob aby sekcja nr.2  wyswietlala tylko 100vh backgrounda, sekcja nr.3 od 100vh do 200vh, sekcja nr.4 od 200vh do 300vh.
Niestety w tym przypadku main blokuje skrolowanie (http://codepen.io/anon/pen/zKZYqp).

Prosze o poradę, z góry dziękuję :)

Edit:
 

http://jsfiddle.net/omarqa/dY44L/1/

W jaki sposob przerobić kod js aby zamiast zdarzenia onclick występowalo zdarzenie scrollowania? Być moze to bedzie najłatwiejsze rozwiązanie problemu?

Pozdrawiam