Я хочу реализовать бесконечную прокрутку. Ниже приведена краткая форма моего макета. Поскольку некоторые элементы расположены относительно друг друга, событие прокрутки JavaScript не запускается.

Как я могу исправить эту проблему, чтобы запустить событие прокрутки и реализовать бесконечную прокрутку?

Мой основной макет:

    
        
        ...
         

        
        ...
        

     
 

И мой CSS это:

#container {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 35px;
    left: 0;
    right: 0;
    overflow-y: auto;      
    overflow-x: hidden;      
}

.wrapper {
    margin: 0 auto;
    width: 960px;
    position: relative;
}   

#header {
    position: relative;
}

#main {
}

#footer {
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
} 

Что мне нужно изменить так, чтобы я мог получать событие прокрутки браузера с моим макетом для реализации бесконечной прокрутки?