5

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?

chrisTina
  • 2,298
  • 9
  • 40
  • 74

2 Answers2

5
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.

Kehan Wang
  • 173
  • 1
  • 8
3
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);

});
bcr
  • 3,791
  • 18
  • 28
  • man, please look carefully about the question, the scroll bar is inside a `div`, it is not a `body` scroll bar – chrisTina Nov 12 '15 at 22:04
  • Ah, edited. You're looking for `offset()` which contains properties `top` and `left` – bcr Nov 12 '15 at 22:06
  • I do not think I understand your answer. Can you show sth in the http://jsfiddle.net/RjHMH/114/? – chrisTina Nov 12 '15 at 22:14
  • I didnt solve your whole problem, I just showed you how to get the current position. Just store that position in a variable that's available to whatever method sets it back to the saved position. – bcr Nov 12 '15 at 22:18