1

Uso SweetAlert2 y en ocasiones el modal elimina mi Scroll y ya no me permite desplazarme hacia el contenido en la pagina inferior.

Adjunto el código que uso

Swal.fire({
        icon: "question",
        title: "¿Actualizar credenciales?",
        html: `<p>Tiempo restante.</p>
        <div class="hour"> <span id="minutes"></span> minutos / <span id="seconds"></span> segundos </div>`,
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        confirmButtonText: 'Si, confirmar',
        cancelButtonText: 'No, cancelar!',
        reverseButtons: true,
        allowOutsideClick: false,

    })
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

2 respuestas 2

1

Es el comportamiento esperado, si tu tienes una alerta y esta cubre toda la pantalla es normal que no puedas hacer scroll y para eso sweetalert2 lo desactiva

Si tu alerta no es del tipo que debe cubrir toda la pantalla, pones backdrop:false

Swal.fire({
    icon: "question",
    title: "¿Actualizar credenciales?",
    html: "algo",
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    confirmButtonText: 'Si, confirmar',
    cancelButtonText: 'No, cancelar!',
    reverseButtons: true,
    allowOutsideClick: false,
    backdrop: false

})
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>
  //generando contenido para que aparesca el scroll
  for(let i=0; i<50;i++)
  {
    document.write(`<div>Linea ${i}</div>`);
  }
</script>

En todo caso siempre puedes recurrir a pisar los CSS

Swal.fire({
    icon: "question",
    title: "¿Actualizar credenciales?",
    html: "algo",
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    confirmButtonText: 'Si, confirmar',
    cancelButtonText: 'No, cancelar!',
    reverseButtons: true,
    allowOutsideClick: false,
})
body.swal2-shown {
    overflow: noset !important;
}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>
  //generando contenido para que aparesca el scroll
  for(let i=0; i<50;i++)
  {
    document.write(`<div>Linea ${i}</div>`);
  }
</script>

0

Viendo este artículo, lo podrías solucionar agregando la siguiente clase de CSS:

.swal2-shown {
  overflow: unset !important;
  padding-right: 0px !important;
}

Si el error persiste, puedes agregar la propiedad scrollbarPadding y heightAuto de SweetAlert2, y ambos asignarlo a false:

Swal.fire({
    icon: "question",
    title: "¿Actualizar credenciales?",
    html: `<p>Tiempo restante.</p>
    <div class="hour"> <span id="minutes"></span> minutos / <span id="seconds"></span> segundos </div>`,
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    confirmButtonText: 'Si, confirmar',
    cancelButtonText: 'No, cancelar!',
    reverseButtons: true,
    allowOutsideClick: false,
    scrollbarPadding: false,
    heightAuto: false
})

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.