Creating horizontal scroll with extra padding space in React component

I’m trying to build a horizontally scrollable container in React that behaves similar to spreadsheet applications. When users scroll the content to the left, I want to display additional empty space at the end of the scrollable area.

Has anyone implemented this kind of scrolling behavior before? I’m looking for a way to dynamically add padding or extra space when the scroll position changes. The idea is to create a smooth scrolling experience where users can see beyond the actual content boundaries.

I’ve tried basic CSS overflow properties but can’t figure out how to add that extra space dynamically. Any suggestions on how to approach this in React would be really helpful.

yea, I’ve struggled with this too! you can use the onScroll event to calculate the scroll position and then dynamically set padding or margin based on that, honestly, it makes it feel way more polished. good luck!