跟踪 HTML div 内的滚动位置

Question

I am using google visualization table to create an html table, and it enables The header row remains fixed as the user scrolls.

I got something working like this: http://jsfiddle.net/RjHMH/114/

The problem I am facing is that, when I click a row to expand the table, it actually redraw the table, so that the scroll bar will always be at the top of the table. Is there anyway I can track the current position of the scroll bar when I click, and set the value back when the table is redrawn?

If it is a scroll bar of the DOM , I can use:

var pos = $('body').scrollTop();
table.draw(view, options);
window.scrollTo(0, pos);

Then how to track the scroll bar inside a div ?

Answer 1

var currentY = 0;

$(window).scroll(function () {
    currentY = $('selector').offset().top;
    console.log(currentY);
});

To get the position on click:

$(document).click(function () {
    currentY = $('selector').offset().top;
    console.log(currentY);

});

Answer 2

document.getElementsByClassName("google-visualization-table")[0].children[0].onscroll = function(){
    console.log(this.scrollTop); //check the number in console
}

The key is to get the div in js, or use jquery, then you can visit the scrollTop of that div.