Написал модальное окно, которое подстраивается под количество контента и включает возможность его прокрутки при переполнении через overflow в css. Работает все отлично, но есть небольшой баг или возможно мой косяк, если пролистать контент в модальном окне до конца (низа) убрать палец и начать пытаться листать вниз, то прокрутка просто блокируется. Приходится зажимать повторно для прокрутки вверх. Пытался отследить элемент на который приходится нажатие, вдруг оно проходит вообще сквозь модальное окно, но у меня не получилось, mousedown работает иначе в режиме Device Mode.
Элемент за модальным окном я фиксирую, он двигаться не может. Помигите)
React component модалка
import React from 'react'
import stylePopup from './popup.module.css'
import { bodyFixed, bodyStatic } from './EventModal';
import MyButton from '../UI/Button/MyButton';
const PopupModal = (props) => {
const popupModalRef = React.useRef()
//запрещаю прокрутку для body
bodyFixed()
const onClose = () => {
props.onClose()
//разрешаю прокрутку для body
bodyStatic()
}
return (
<div className={`${stylePopup['modal']}`}>
<div className={stylePopup['modal__body__wrapper']}>
<div className={stylePopup['modal__body']} ref={popupModalRef}>
<div className={stylePopup['modal__title']}>{props.title}</div>
<div className={stylePopup['modal__content']}>
{props.content}
</div>
<div className={stylePopup['modal__close']}>
<button onClick={() => {onClose()}}>Закрыть</button>
</div>
</div>
</div>
//фон, при нажатии закрывает модалку
<div className={stylePopup['modal-background']} onClick={() => {onClose()}}></div>
</div>
)
};
export {PopupModal}
React app
import { useRef, useState } from 'react';
import style from './app.module.css'
import { PopupModal } from './components/Popup/Popup';
function App() {
const Info = () => {
return (
<div className={style['info']}>
<div className={style['info__item']}>
<div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
<div className={style['info__item__text']}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
</div>
</div>
<div className={style['info__item']}>
<div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
<div className={style['info__item__text']}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
</div>
</div>
<div className={style['info__item']}>
<div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
<div className={style['info__item__text']}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
</div>
</div>
<div className={style['info__item']}>
<div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
<div className={style['info__item__text']}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
</div>
</div>
<div className={style['info__item']}>
<div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
<div className={style['info__item__text']}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
</div>
</div>
<div className={style['info__item']}>
<div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
<div className={style['info__item__text']}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
</div>
</div>
</div>
)
}
return (
<div className={style['App']}>
<button onClick={() => setModal(true)}>Открыть описание</button>
{modal &&
<PopupModal
title='Описание'
content={
<Info/>
}
onClose={() => setModal(false)}
/>
}
</div>
);
}
export default App;
css app
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background: #333;
width: 100%;
}
.App {
width: 100%;
max-width: 425px;
padding: 0 15px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Item */
.info {
width: 100%;
}
.info__item {
margin: 10px 0;
}
.info__item__title {
font-size: 16px;
font-weight: 500;
margin: 0 0 10px;
}
.info__item__text {
font-size: 14px;
font-weight: 400;
color: #333;
}
css popup
/* Popup Mobile Modals */
.modal {
position: fixed;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 3050;
}
.modal-background {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: var(--vb-bl-opacity-3);
transition: all 0.5s;
z-index: 1;
-webkit-animation: modal-backgr 0.5s;
animation: modal-backgr 0.5s;
}
.modal__body__wrapper {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: block;
}
.modal__body {
position: absolute;
bottom: 0;
left: 0;
background: #fff;
border-radius: 12px 12px 0 0;
max-height: 95%;
display: flex;
flex-direction: column;
width: 100%;
z-index: 2;
-webkit-animation: modal-content 0.3s;
animation: modal-content 0.3s;
}
.modal__title {
padding: 10px 15px;
color: #000;
font-weight: 500;
font-size: var(--vb-font-mobile-title);
border-bottom: 1px solid var(--vb-grey-ed);
}
.modal__content {
display: block;
padding: 0 15px 50px;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}
.modal__content::-webkit-scrollbar {
display: none;
}
.modal__close {
width: 100%;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: end;
position: fixed;
bottom: 5px;
left: 0;
}
.modal__close button {
flex: 0 0 120px;
padding: 10px 15px !important;
}
@keyframes modal-backgr {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modal-content {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
Простой
Средний
