Question

I’m creating a dyanamic scrolling div and it works fine on Jsfiddle as seen here –> http://jsfiddle.net/9zXL5/19/embedded/result/ yet on the browser I get:

Uncaught TypeError: Cannot set property ‘onscroll’ of null

So then I added $(document).ready(function (){ to my code and got

Uncaught ReferenceError: yHandler is not defined

I’m not understanding why I’m getting these errors yet its flowing smoothly on jsfiddle. I’d really appreciate it if someone could tell me what I’m not understanding or missing. Code in question is below

var movelist = document.getElementById('movelist');
    $(document).ready(function (){
    function  yHandler (){
        var contentHeight = movelist.scrollHeight;
        var yOffset = movelist.clientHeight;
        var y = yOffset + movelist.scrollTop;
        if(y >= contentHeight){
            movelist.innerHTML += '<div class ="newData">hey look at me</div>';
        }
    }
});
movelist.onscroll = yHandler;

Answer 1

It’s working in your Fiddle because everything is in the same scope. You are declaring movelist outside your $(document).ready. Move both the var movielist = ... and movielist.onscroll = yHandler; inside your $(document).ready.

You can also move your yHandler function outside your $(document).ready.