0

I have a react component that is generating a list. For examples sake lets say that it looks like this:

<table>
   <tbody>
      <tr>
        <td>
          {...}
        </td>
      </tr>
      {/* These are being generated so there are a bunch*/}
   </tbody>
</table>

However I want the list to function in a way that the active list item always falls in the center of the screen. This is not too much of a problem except for when I get to the top or the bottom of the list. I need a way to scroll past the top or the bottom of the list and I am not quite too sure how to do this.

The first idea I had was to create some empty table rows to fill the space needed to scroll up past the top or down past the bottom, but this felt like a "hacky" solution. Any help would be appreciated. Thanks.

FactorialTime
  • 147
  • 12
  • You can use JQuery to scroll to the element. See the answer here: http://stackoverflow.com/questions/1586341/how-can-i-scroll-to-a-specific-location-on-the-page-using-jquery – Aziz Dec 08 '16 at 15:49
  • That's one way to do it: Add one `tr` to the top and one to the bottom and set the height of it's child `td` to be half the height of the screen minus half the height of the first or last `td`. Or you can just pad the top or the bottom the first or last row, respectively. – Adam Jenkins Dec 08 '16 at 15:50
  • @Aziz I am aiming to not use JQuery if possible. I should have mentioned this in the original post. What would be your backup plan? I cant quite get the ReactDOM to function the way I would like. – FactorialTime Dec 08 '16 at 15:56
  • @Adam If you look at the SO answer there is a way to do it using plain javascript via window.location.hash – Aziz Dec 08 '16 at 16:16

0 Answers0