I’m attempting to build a very basic front-end UI/desktop app using React and Electron (with no frame). However, I think this is really just about CSS/styling.
I have a scrollable section element. This element also has the following styling attached to it. ‘’’-webkit-app-region: no-drag’’’
My body element has drag enabled.
Everything almost works perfectly, I can drag my UI around as needed (almost) but the problem comes when I scroll down on the section element. Even though the content looks contained in the section, the part scrolled up still exists (invisible) apparently, and it interferes or creates a conflict with the area that I want to be drag-able (since it is no-drag).
I suppose this is how scrolling is supposed to work, mechanically, but is there a way to actually fully contain the scrollable content, ie. not be detectable or interfere when it is “invisible” outside of the container?
I’ve tried playing around with z-index, and nesting containers with other stylings I thought might help but this seems beyond my experience.
Is there any sort of fix, work-around, or something basic that I’m missing?
Any help would be appreciated.
Thanks.