Infinite Scroll

Infinite Scroll is a project that was intially plalned to be designed in a way that would allow users to infinitely scroll through the table, as other soacial medias such as Instagram reels and TikTok allow their users.

The project consist of more than 40,000 rows of data and it will only fetch about 100 rows per page. Meaning the scroll I created will fetch the first 100 rows and show those to the user, until user scrolls to another page (new data will be fetched) or scolls back (the old data will be fetched again). 

The scrolls works both by mouser hovering over the scroll bar div and scroll or clicking within the div and the page indicator moves to that sectios. It also works by the buttons on the top and bottom of the page. By double clicking either, it will move to the first or last page. By regural single click it will move to one back or forward, depending on the button.

JavaScript/React/MUI are used for front-end code development. For the backend development, Flask and Python are used to connect to MongDB to fetch and retrive data from database. You can view the source codes in repository here!

Initial view of the table, with scroller being on page 0 and displaying the first 100 rows of data.

As the scroller moves up and down, the indicator displays a number which represents the number of page the user is on.

Scrollers indicator moves along the div and shows the number of the page user is viewing.

Hovering over the scroll bar will also display a popover that would indicate the current location of mouse would change to which page number, if the usere were to click.

Popover, inidcating the page number.

Hovering over the table rows will change the color of the row that the mouse is on. By clicking on the rows overview section, a popover will open up and display the whole overview. 

Overviews popover can also be moved around through the mouse and via X button. 

Popover displaying full overview of the movie.