Есть модалка. В ней - есть карточки для скролла. Вне модалки они скроллятся ок на ios. Однако, внитури модалки их нельзя проскроллить. Пробовал убрать все свойства со скроллом, менять значения. Все не то.
<div className={classes}>
<div className="modal__inner" ref={this.modalInner}>
<div className="modal__container">
<div className="payment">
<div className="payment__inner">
{this.props.payments.map((card) => (
<PaymentCard
key={card.id}
extraClass={"payment__card"}
card={card}
/>
))}
</div>
</div>
</div>
</div>
</div>
---------------Стили родителя карточек
.payment__inner {
display: flex;
margin-left: 0;
margin-right: 0;
padding-bottom: 24px;
padding-top: 7px;
overflow-x: auto;
scrollbar-width: none;
scrollbar-color: $trs;
-webkit-overflow-scrolling: auto;
&::-webkit-scrollbar,
&::-moz-scrollbar,
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track-piece,
&::-webkit-resizer {
width: 0 !important;
height: 0 !important;
display: none !important;
background-color: $trs;
-webkit-appearance: none;
}
}
-----------------стили модалки
.modal {
position: fixed;
z-index: 200;
background: rgba(15, 25, 50, 0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
display: none;
&.opened {
display: block;
}
&__inner {
background-color: $white;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
padding: 16px 0;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
transition: bottom 0.05s;
}
}
Простой
Простой
Простой