scrollTop not writable and always zero. scrollHeight always the same number

Question

            <script type="text/template" id="gameroom_template">
            <input id="chatedit" type="text" />
            <input id="chatsend" type="button" value="send.chat" /> 
            <input id="chatleave" type="button" value="Leave Room" /></br>
            <div id="chatroll" style="font-size: 20px;width: 500px; height: 100px; overflow-y: scroll; border: 1px solid black;">
            </div></br>
            <canvas id="gameboard" width="500" height="500" style=""></canvas>
            </script>


            jQuery("#chatedit").val('');
            var scrolltop = document.getElementById("chatroll").scrollTop;
            var scrollheight = document.getElementById("chatroll").scrollHeight;
            console.log(scrolltop);
            console.log(scrollheight);

I'm loading the template with backbone.js. I see it and can interact with it however my attempts to set scrollTop to some value other than zero are not working. What I am doing is using the console to run the code and then checking the value of scrollTop which always comes back zero. I have tried setting it with jQuery and JavaScript ways. Does anyone know why scrollTop is not writable? I'm noticing as well as I fill the div with text and move the scroll bar up and down to various levels the value of scrollHeight is always 16.

Thank you for posting....

Answer 1

I'm not sure what value you are trying to get. Are you trying to get the scroll position of the body? The position in relation to the body of chatedit?

To get the body scroll position, you would use:

document.body.scrollTop

To get the position of the chatedit element, I'd suggest using jQuery:

$('#chatedit').offset().top

If you're trying to see where it sits in relation to the viewport, you would merge the two:

$('#chatedit').offset().top - document.body.scrollTop