Top Scrollbar in Google table chart

[Phil Grant]

Hi,
Im using a Google table chart with some filters at the top and it’s quite a long table and I would like to have a scroll bar at the top aswell as the bottom.

I’ve googled it and tried a couple of things but I just can’t seem to get it to work, I can get a sroll bar on top of the chart but I can’t seem to get it to link the movement to the Google table.

The code to link them is this
1 <script>
2 scroll() {
3 let scroller = document.querySelector(‘.above-scroller’);
4 let table = document.querySelector(‘.VCRListTable_chart’);
5 table.scrollTo(scroller.scrollLeft,0);
5 }
6 </script>

I’ve tried different names in line 4 like the DIV class and ID and the name from the F12 console when I use “inspect element”.

Is what I’m trying to possible or am I just using the wrong names?

Thanks for any help.

[Alexander Bautz]

I’m not sure I understand what you mean – can you show a screenshot or a mockup of what you are looking to achieve?

Alexander

[Phil Grant]

I’ll post a screenshot tomorrow but basically if you have a Google chart of a list set to a table view you get a spreadsheet style table and there is a single horizontal scroll bar across the bottom of the chart, I want to move it to the top of the chart instead or have a second scroll bar at the top.
I managed to get a scroll bar at the top but the code to link the top scroll bar to the bottom scroll bar doesn’t work.

[Alexander Bautz]

This is not a Google chart question, but a general HTML question. I had to Google it – it isn’t directly supported so the only thing that *might* work is something like this: https://salesforce.stackexchange.com/questions/316384/show-horizontal-scroll-bar-on-top-of-section

I haven’t tested it so I cannot tell for sure, but in any case it will be a hack that might not work in all browsers.

Alexander

[Phil Grant]

Thanks, I had already tried the flip idea and it worked but I couldn’t find the syntax to control the outer and inner objects seperately so the whole thing was flipped and upside down! looked really strange.

[Author]

Posts