Not scrolling enough?

Hi. Not sure it’s a bug report or a question. I have a SPA built with Vue2 with some fixed headers / banners on top of the page (which has a body with height:100%).

I split the remaining space of the page into columns, inside which I have bootstrap3 tables (1 table per column, and the table itself has only 1 column). I want to be able to scroll one table with arrows.

vue-scrollto basically works, but doesn’t scroll enough. I can navigate from one table cell to the next, but at some point the active cell is out of the screen. As if the scroll wasn’t enough. I played a lot with offset but it seems to have no effect whatsoever in my case.

You can try yourself in this page: https://www.arcsecond.io/objects/HD 5981 Wait for the Publications column to fill completely, and click on one cell, then navigate with up/down arrows.

Thanks in advance for checking!

[onekiloparsec]

Thanks for your reply. I remain cautious about this tbody having a fixed height too. But I tested a lot around, and this was appeared to be necessary for my case. Maybe it’s only a side effect of my personal setup.

[onekiloparsec]

Ok, I made it working. As far as I can tell, here are the conditions I had to meet (a lot obvious, but the right combination took time):

• tbody must have display: block;
• table has overflow-y: scroll; and overflow-x: scroll;
• scrollTo options container must point to the element having the properties overfllow-x|y (if they are on tbody, then container must point to tbody.
• tbody must have some kind of fixed height. I use height: calc(100vh);. If it doesn’t have a fixed height, nothing works.
• I noticed the offset option seem to be dependant of the table position. I mean, my table doesn’t start at the top of the page (say, 100px below). Offset is then effective only if its value > 100px.
• I could keep my flex properties. This wasn’t related after all.