I have a modal so when I open a modal the parent element touch should be disabled and child element touch will work

I have done that for click using pointer events, but in mobile it behaves differently, is there anyway I can fix that for touch

<div className="parent">
  <div className="child">
  </div>
</div>

my CSS looks like

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

is there anyway I can make my parent not scrollable also?