How to prevent blank areas on touch screen when swiping-scrolling elements?

I have a react project that works on a touch screen. When user holds and swipes the component (whether it has a scroll-bar), the main container of the application also swipes to that side and blank areas appear on viewport (outside of the root container). We can see this feature on some applications of our phones, when we hold and drag our application, blank areas appears on the opposite side.

If I add touch-action: none in that component's css code, nothing happens and I reach my goal. But if add pan-x or pan-y property in component that has scrollbar, It happens again and shows blank areas when scroll reach it's edges.

I couldn't find any solution from internet and even from chatgpt, so here we are:

I want to a static page that doesn't move any side of screen when user swiping (dragging) components? So,

1. How can I prevent blank areas caused by holding and swiping elements on touch screen? Should I handle them one-by-one? Or,

2. Is there any easy way to disable this feature from whole project at once?

Meta tag that I use in html is: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">

I solve this issue by fixing position of root component:

#root {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
}