0

primero quiero explicar lo que quiero hacer, en la versión mobile de un sitio quiero hacer que un botón al tocarlo abra un menú desplegable con opciones distintas opciones. El menú es el siguiente:

introducir la descripción de la imagen aquí

La idea actual es que, al abrir el menú, se aplique un efecto de superposición al fondo y se permita un desplazamiento interno dentro del menú.

No obstante, me surge un problema: al interactuar con el menú, toda la página se desplaza, es decir, al intentar desplazarse dentro del menú, se desplaza simultáneamente el fondo. Además, se puede interactuar con otros elementos en la página, lo cual no es la intención.

La pregunta es ¿cómo puedo evitar este desplazamiento no deseado y bloquear la interacción con los elementos fuera del menú?

El código que tengo es este (Estoy con Angular y Tailwind):

  • El codigo del menu:
<div class="overlay">
  <section class="modal-filter">
    <div class="flex justify-between">
      <h3>Filter by</h3>
      <button>Clean Filter</button>
    </div>
    <ul>
      <li>
        <!-- Filtro...-->
      </li>
      <li>
        <!-- Filtro...-->
      </li>
      <li>
        <!-- Filtro...-->
      </li>
      <li>
        <!-- Filtro...-->
      </li>
      <li>
        <!-- Filtro...-->
      </li>
    </ul>
  </section>
</div>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.modal-filter {
  position: fixed;
  top: 24%;
  right: 1.2dvw;
  background: #fff;
  border-radius: 0.9375rem;
  width: 75dvw;
  z-index: 100;
  max-width: 410px;
  padding-block: 10px;
  overflow-y: auto;
  pointer-events: auto;
}

A su vez esto es un componente que se usa dentro de otro por las dudas lo muestro:

<main class="shop-container">
  <section class="filter-container">
      <div class="w-full flex justify-between ml-4 mr-8 items-center min-[975px]:hidden">
       @if( !this.loading() ){
        <span>{{ books().totalElements }} found books</span>
      } @else {
        <span>Looking for books...</span>
      }
      <button class="text-[#069150] flex gap-x-1" type="button">
        Filters
      </button>
    </div>
  </section>
  <section class="result-container">
      @if ( !this.loading() ){
        <div class="result-list">
          @for(book of getBooks(); track book.id){
            <card-book [book]="book"></card-book>
            <app-card-book-horizontal [book]="book"> </app-card-book-horizontal>
          }
        </div>
      } @else {
        <div class="spinner grid grid-cols-3 w-full gap-x-8 justify-center ">
          <dot-spinner></dot-spinner>
        </div>
      }
  </section>
</main>
<shop-filter-mobile class="block w-full h-full min-[975px]:hidden"></shop-filter-mobile>
.shop-container {
  display: flex;
  flex-direction: column;
  max-width: 100dvw;
  height: auto;
  margin-block-start: .2rem;
}

En esta pagina el componente que tiene el modal y el overlay es el "shop-filter-mobile", y los estilos aquí se aplican con tailwind. Espero alguien pueda ayudarme

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.