Why does 2 scroll bars appear on my page? 1 inner scroll bar and 1 outer scroll bar?

Question

Why does 2 scroll bars appear on my page? 1 inner scroll bar and 1 outer scroll bar?

I am using infinite ajax scroll here: http://infiniteajaxscroll.com

and pure css parallax scrolling here: http://blog.keithclark.co.uk/pure-css-parallax-websites/

Here is my demo: http://bycustomdesign.com/_misc/_09/page1.html

Page 1 generates 2 scroll bars, inner and outer. I don't know why. How do I get rid of inner scroll bar but still able to scroll down to page 2 and page 3.

Answer 1

Adding the following CSS to the inner scrolling div may help:

inner { 
  overflow: hidden;
}

Answer 2

You also can use in case something else is causing this

html {
  overflow-x: initial !important;
}

Answer 3

I have a wrapper around my parallax div.

By reducing the height of the wrapper, the second scrollbar is now gone. So try reducing the height of the div around your parallax div.

wrapper {
  height: 650px;
}