Mi página de inicio tiene mucho contenido. Cuando creo cualquier cuadro de diálogo modal, la barra de desplazamiento del contenido del cuerpo está visible y cuando nos desplazamos, se desplaza hacia abajo hasta la parte inferior de la página.
En el diálogo también tengo que mostrar mucho contenido. Entonces, si puedo ocultar la barra de desplazamiento del cuerpo y mostrar solo los medios de la barra de desplazamiento modal, sería una buena experiencia para el usuario.
La idea es, cuando se muestra un cuadro de diálogo modal y algún contenido desplazable encima, deshabilitar la barra de desplazamiento de la página principal y mostrar solo la barra de desplazamiento para el div modal actualmente visible.
¿Qué debo hacer para ocultar la barra de desplazamiento del contenido del cuerpo y mostrar una en el div modal?
Mi lado del cliente está lleno de JavaScript y jQuery.
¡Cualquier sugerencia sería apreciada!
Agregue $('body').css('overflow','hidden') a su función que muestra el modal, y $('body').css('overflow','scroll') a su función que cierra el modal.
Cuando usé $('body').css('overflow','scroll') o $('body').css('overflow', 'inherit') la barra de desplazamiento no aparecía en la esquina derecha del navegador ventana, pero en el borde del contenedor de la página...
Sé que este problema se debe al diseño y los estilos css del sitio en particular, pero en este caso, cambiar el estilo de la etiqueta html parece ser más universal:
$('html').css('overflow','hidden'); - ocultar la barra de desplazamiento$('html').css('overflow','scroll'); - Mostrar barra de desplazamientoSi envuelve todo el contenido de su cuerpo en un contenedor div con overflow: hidden , puede establecer dinámicamente la altura de ese div igual a la altura de la ventana gráfica cuando abre su cuadro de diálogo modal.