Hogar › Servicios › Cómo eliminar el desplazamiento en el navegador. ¿Cómo ocultar las barras de desplazamiento? Cómo quitar la barra de desplazamiento. Descripción del problema

Cómo eliminar el desplazamiento en el navegador. ¿Cómo ocultar las barras de desplazamiento? Cómo quitar la barra de desplazamiento. Descripción del problema

Y por eso, hoy es necesario eliminar las barras de desplazamiento horizontales y verticales. Consideremos situaciones en las que puede surgir un problema de este tipo y las principales formas de solucionarlo.

Eliminar barras de desplazamiento de una página usando CSS

El método se basa en el uso. CSS propiedades rebosar, que determina cómo se mostrará el contenido de una estructura de bloque si (el contenido) excede las dimensiones del elemento principal.

De todos los valores posibles de esta propiedad, nos interesa el valor” oculto»:

desbordamiento: oculto;

que indica al navegador “mostrar contenido que se ajuste; ocultar lo que no se ajuste”

Aplicando esta propiedad al selector cuerpo o HTML Puedes hacer que las barras de desplazamiento desaparezcan.

Veamos un ejemplo:

< html> < head> < meta charset= "UTF-8" > < title>Eliminando desplazamiento< body> < div>

div (altura: 2800px;)

Como puede ver, tenemos una página limpia y prístina con una altura de 2800 px con una barra de desplazamiento vertical. Ahora agreguemos la línea a la hoja de estilos en cascada:

html (desbordamiento: oculto;)

y actualizar la página.

También puedes aplicar propiedades. desbordamiento-y (desbordamiento-x) para controlar la visualización de contenido fuera de lugar solo verticalmente (horizontalmente). Es decir, según el contexto en cuestión, puede ocultar sólo la barra de desplazamiento vertical (horizontal).

¡¡¡Importante!!!

CSS no oculta las barras de desplazamiento, simplemente crea condiciones para el navegador bajo las cuales no es necesario mostrarlas. Esto significa que, junto con las barras de desplazamiento, también perderá la función de desplazamiento y el “contenido que no encaja” no estará disponible para su visualización.

Antes de utilizar esta técnica, piense detenidamente si la necesita. Después de todo, un pequeño defecto puede hacer que pierdas de vista información útil.

Lo más justificado sería utilizar desbordamiento: oculto en los siguientes casos:

Mostrar una pequeña página que a priori cabrá enteramente en la pantalla (por ejemplo, páginas de error, páginas de autorización, etc.).
Salida de pequeños formularios web.
Ocultar barras de desplazamiento al crear su propia barra de desplazamiento personalizada.

Epílogo

La mayoría de las veces, los webmasters llegan a este tema cuando el brillante diseño del sitio del autor llega a cero debido a la apariencia estándar "aburrida" de la barra de desplazamiento del sistema. Sí, esto también sucede. En este caso, existen varias opciones para solucionar el problema:

Personaliza las barras de desplazamiento del sistema.
Hoy en día es posible una configuración más o menos flexible con navegadores basados en kit web.

Tenemos a nuestra disposición una gama bastante amplia de pseudoelementos responsables de las partes estructurales de las barras de desplazamiento y pseudoselectores que ayudan a personalizar la apariencia de las partes estructurales en diferentes estados.

Ventajas:

El desplazamiento del sistema es mucho más productivo javascript-simuladores, implementa todas las funciones del sistema operativo del dispositivo y mantiene la funcionalidad multiplataforma.

Defectos:

No hay garantías de que los navegadores de otros (no kit web) los motores podrán comprender toda la “sutileza de la organización mental” de su sitio (lo más probable es que no se realice la personalización).

Ocultar las barras de desplazamiento del sistema y utilizar javascript-emulador.
Parecería bastante lógico: si desea compatibilidad entre navegadores, utilice javascript. Pero en este caso se trata de un cruel error.

El caso es que en este caso javascript debe procesar los eventos del sistema relacionados con el desplazamiento. Y la interfaz de estos eventos es significativamente diferente para cada navegador, sin mencionar las diferentes plataformas. Tenga en cuenta esta información cuando utilice j-scrollers "ya preparados" (especialmente cuando la página de origen afirma que está "cruzada" completa sin confirmación).

Ventajas

Personalización ilimitada en profundidad.

Defectos

El rendimiento del emulador es inferior al rendimiento del desplazamiento del sistema.
No hay garantías de funcionalidad entre navegadores o plataformas.

Este vídeo trata sobre cómo eliminar la barra de desplazamiento al visualizar y publicar un sitio web en Adobe Muse.

Hay 2 maneras de hacer esto:
1. El primero de ellos es simplemente eliminar elementos que se encuentren fuera del área de contenido en el modo “Diseño” de la página.
2. La segunda es colocando un código html especial en la sección del encabezado de la página.

Mira este vídeo:

“En este video tutorial veremos cómo quitar la barra de desplazamiento

Cómo quitar la barra de desplazamiento. Descripción del problema.

Abramos el programa de inmediato, aquí se ha creado un nuevo proyecto. Aquí haremos una escala del 75%, por si acaso. Y ampliemos la página. Digamos que tenemos varios objetos en la página: uno, dos, tres. Aquí tenemos algo de texto, logotipos, imágenes, lo que sea. Y accidentalmente colocaste un objeto fuera del área de contenido de la página.

Cuando hace clic en el icono de "selección", este objeto no será visible para usted. Especialmente si tiene desactivada la función "mostrar márgenes del marco", y en versiones anteriores esta era la opción predeterminada, los bordes del marco eran visibles solo cuando pasaba el mouse sobre él. El objeto que se encuentra fuera de la página no será visible en absoluto hasta que pase el mouse sobre él.

Por lo tanto, cuando visualiza una página en un navegador, experimenta un desplazamiento horizontal, lo cual resulta muy molesto para todos en el sitio. Además, si tiene el color de fondo de la página configurado en verde, por ejemplo, cuando vea y se desplace hasta la parte inferior de la página, verá que su página tiene desplazamiento horizontal, por lo que será mejor visible.

Cómo quitar la barra de desplazamiento. Solución 1.

Vamos al modo de diseño de página, incluso si tienes la función “bordes de marco” desactivada, puedes presionar la combinación de teclas Ctrl+A y así seleccionar todos los objetos de tu página. Luego, reduzca la escala al 50% o mantenga presionada la tecla Alt y gire la rueda del mouse hacia usted. De esta manera verás que tienes objetos detrás del área de contenido de la página.

Para eliminar el desplazamiento horizontal, debe eliminar estos objetos innecesarios o moverlos al área de contenido de la página.

Pulsamos la combinación de teclas Ctrl+ y vemos que no tenemos nada detrás del área de contenido de la página.

Pasamos al modo de visualización y ahora no tenemos desplazamiento horizontal en el navegador.

Cómo quitar la barra de desplazamiento. Solución 2.

Si no pudo eliminar el desplazamiento horizontal con este método, existe otra forma de desactivar este desplazamiento en su página.

Debes ir al menú "Página", " ", y aquí en la sección "Metadatos", en el bloque HTML del encabezado, inserta un código, que te mostraré ahora. Puedes ver este código en la descripción de este vídeo, cópialo y pégalo. Así es como se ve.

Selecciónelo (presiono la combinación de teclas Ctrl+C), vuelva al modo de diseño de página, insértelo aquí en las propiedades de la página y haga clic en Aceptar.

Por lo tanto, incluso si algún bloque está ubicado fuera del área de contenido de la página, al visualizar la página en un navegador, tampoco tendrá desplazamiento horizontal.

Cómo quitar la barra de desplazamiento. Conclusión

Esto concluye nuestra lección. En él aprendimos cómo eliminar la barra de desplazamiento al visualizar una página en un navegador en Adobe Muse.

Y no me despido de ti, suscríbete a mi canal, dale me gusta, escribe comentarios y mira mis lecciones en video anteriores y siguientes. Nos vemos amigos, adiós”.

Cómo quitar la barra de desplazamiento. Adición a la lección.

Para aquellos a quienes este código no funciona y la barra de desplazamiento aún permanece, intente borrar el caché de su navegador primero. También puedes probar estos códigos en lugar del presentado anteriormente:

Eliminar el desplazamiento horizontal sin agregar desplazamiento vertical adicional:

html (desbordamiento-x: oculto)

div (altura: "100%";)

Eliminando cualquier pergamino:

Estoy usando el complemento jQuery scrollTo y me gustaría saber si hay alguna forma de deshabilitar temporalmente el desplazamiento de un elemento de ventana a través de Javascript. La razón por la que me gustaría desactivar el desplazamiento es porque cuando se desplaza durante la animación scrollTo se pone realmente feo;)

por supuesto que podría hacer $("body").css("overflow", "hidden"); y luego volverlo a auto cuando se detenga la animación, pero sería mejor si la barra de desplazamiento aún estuviera visible pero inactiva.

30 respuestas /** * $.disablescroll * Autor: Josh Harrison - aloof.co * * Desactiva los eventos de desplazamiento de las ruedas del mouse, los movimientos táctiles y las pulsaciones de teclas.< this.opts.scrollEventKeys.length; i++) { if (event.keyCode === this.opts.scrollEventKeys[i]) { event.preventDefault(); return; } } }; // Plugin wrapper for object $.fn.disablescroll = function(method) { // If calling for the first time, instantiate the object and save // reference. The plugin can therefore only be instantiated once per // page. You can pass options object in through the method parameter. if(! instance && (typeof method === "object" || ! method)) { instance = new UserScrollDisabler(this, method); } // Instance already created, and a method is being explicitly called, // e.g. .disablescroll("undo"); else if(instance && instance) { instance.call(instance); } }; // Global access window.UserScrollDisabler = UserScrollDisabler; })(jQuery);

* ¡Úselo mientras jQuery anima la posición de desplazamiento para garantizar un viaje súper fluido!

*/ ;(función($) ( "usar estricto"; instancia var, proto; función UserScrollDisabler($contenedor, opciones) ( // barra espaciadora: 32, subida de página: 33, bajada de página: 34, fin: 35, inicio: 36 / / izquierda: 37, arriba: 38, derecha: 39, abajo: 40 this.opts = $.extend(( handleKeys: true, scrollEventKeys: ), opciones); this.$container = $container (documento); lockToScrollPos = ; this.disable(); proto = UserScrollDisabler.prototype; proto.disable = function() ( var t = esto; t.lockToScrollPos = [ t.$container.scrollLeft(), t .$container.scrollTop() ]; t.$container.on("mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll", t._handleWheel); t.$container.on("scroll.disablescroll", function() ( t._handleScrollbar.call(t )); if(t.opts.handleKeys) ( t.$document.on("keydown.disablescroll", función(evento) ( t._handleKeydown.call(t, evento); )); ) ); = función() ( var t = this; t.$container.off(".disablescroll"); if(t.opts.handleKeys) ( t.$document.off(".disablescroll");

) );

proto._handleWheel = función(evento) ( evento.preventDefault(); );

proto._handleScrollbar = función() ( this.$container.scrollLeft(this.lockToScrollPos); this.$container.scrollTop(this.lockToScrollPos); );
altura, igual que arriba
barra de desplazamiento, cuando se establece la posición en fija, el contenido de la página ya no tiene una barra de desplazamiento, incluso si tenía una barra de desplazamiento antes de provocar un salto de página horizontal
Salto de página: cuando se establece una posición fija, el desplazamiento superior de la página ya no es efectivo, lo que resulta en un salto de página vertical.

Si alguien tiene alguna mejora en el código de congelación/descongelación de la página anterior, hágamelo saber para poder agregar esas mejoras a mi proyecto.

desactivar el desplazamiento:

$(".popup").live(( popupbeforeposition: function(event, ui) ( $("body").on("touchmove", false); ) ));

después de cerrar la ventana emergente de desplazamiento de versión:

$(".popup").live(( popupafterclose: function(event, ui) ( $("body").unbind("touchmove"); ) ));

El siguiente fragmento (usando jquery) deshabilitará el desplazamiento de la ventana:

Var curScrollTop = $(ventana).scrollTop();

$("html").toggleClass("noscroll").css("top", "-" + curScrollTop + "px");

y en tu css:

Html.noscroll (posición: fija; ancho: 100%; arriba: 0; izquierda: 0; altura: 100%; desbordamiento-y: desplazamiento! Importante; índice z: 10;)

Ahora, cuando elimines el modal, no olvides eliminar la clase noscroll en la etiqueta html:

$("html").toggleClass("noscroll");

Document.onwheel = function(e) ( // obtiene el elemento de destino target = e.target; // el elemento de destino pueden ser los hijos del elemento desplazable // por ejemplo, "li" está dentro de "ul", "p "está dentro de un "div", etc. // necesitamos obtener el elemento principal y comprobar si se puede desplazar // si el elemento principal no se puede desplazar, avanzamos al siguiente elemento principal mientras (target.scrollHeight 0) ( e .preventDefault(); ) ); cuerpo (fondo: Gainsboro; ) #box (ancho: 300px; alto: 600px; relleno: 5px; borde: 1px plata sólida; margen: 50px automático; fondo: blanco; desbordamiento: automático;)

Esta es la solución más simple que he encontrado hasta ahora. Y créanme, probé todos los demás y este es el más fácil. Funciona muy bien en dispositivos Windows que empujan la página hacia la derecha para dejar espacio para la barra de desplazamiento del sistema y en dispositivos iOS que no requieren espacio para sus barras de desplazamiento en los navegadores. Entonces, al usar esto, no es necesario agregar relleno a la derecha para que la página no parpadee cuando oculta el cuerpo o el desbordamiento de HTML usando CSS.

La solución es bastante simple si lo piensas. La idea es dar

Encontré una forma mejor, pero con errores, combinando la idea de sdleihssirhc:

Window.onscroll = function() ( window.scrollTo(window.scrollX, window.scrollY); //O //window.scroll(window.scrollX, window.scrollY); //O Fallback //window.scrollX=window .scrollX; //ventana.scrollY=ventana.scrollY);

No lo he probado, pero lo editaré más tarde y te lo haré saber. Estoy 85% seguro de que funciona en los principales navegadores.

Antes de eliminar las barras de desplazamiento de una página web, piensa si realmente las necesitas. La imposibilidad de desplazarse por el contenido de la página web dificulta que los visitantes de nuestro sitio vean la información. Si existe la necesidad de crear delicias de diseño o el deseo de crear dificultades para sus lectores, continúe y póngase manos a la obra. ¡Pero estás advertido!

Marcos

Para controlar la visualización de las barras de desplazamiento en marcos, utilice el parámetro de desplazamiento. Puede tomar dos valores principales: sí, siempre provoca que aparezcan barras de desplazamiento, independientemente de la cantidad de información, y no, prohíbe su aparición (ejemplo 1).

Marcos

Como se muestra en el ejemplo, el marco izquierdo llamado MENÚ no tendrá una barra de desplazamiento.

En el marco adyacente, aunque no se especifica el parámetro de desplazamiento, las barras de desplazamiento serán visibles como una característica establecida de forma predeterminada.

Nuevas ventanas

Para eliminar la barra de desplazamiento de nuevas ventanas, las capacidades SHTML serán insuficientes.

El enfoque universal requiere el uso de JavaScript para desarrollar una nueva ventana. Y como uno de los parámetros del método window.open, que crea la ventana, puede especificar scrollbar=0 .

Este atributo crea una ventana sin barras de desplazamiento horizontales y verticales (ejemplo 2).

Este ejemplo abre el archivo tips.html en una nueva ventana de 400x300 píxeles de tamaño y sin varios elementos de navegación, incluidas barras de desplazamiento.

Usando estilos

Otra forma es utilizar el atributo de estilo de desbordamiento.

Si este parámetro se aplica a una etiqueta con el valor oculto, la barra de desplazamiento no se mostrará en la página web (ejemplo 3).

Barras de desplazamiento

CUERPO (desbordamiento: oculto;)

Del mismo modo, puedes eliminar la barra de desplazamiento de otros elementos de la página web que la contengan (algunos elementos de formulario, por ejemplo).

Comentario

El ejemplo anterior no funciona en el navegador Internet Explorer; para ocultar las barras de desplazamiento en este navegador, debe eliminar !DOCTYPE. Pero el código ya no será válido.

Si este parámetro se aplica a una etiqueta con el valor oculto, la barra de desplazamiento no se mostrará en la página web (ejemplo 3).

El navegador Internet Explorer también admite las propiedades overflow-x y overflow-y, que le permiten ocultar las barras de desplazamiento horizontal y verticalmente, respectivamente (ejemplo 4).

CUERPO (desbordamiento-y: oculto;)

Si se encuentra en una situación en la que por alguna razón no hay barras de desplazamiento en la pantalla, pero la información aún está ahí, pero no cabe en la pantalla, puede "desplazarse" por la página web usando el teclado (arriba y abajo). flechas) o ratones. Pulsamos el botón del ratón cuando su cursor esté situado en cualquier lugar de la página web y, sin soltarlo, lo movemos hacia abajo. Así es como el contenido se resalta y se desplaza al mismo tiempo. Pero este método, por decirlo suavemente, no es muy conveniente y sólo puede recomendarse en casos muy extremos.

Tarea

Elimine las barras de desplazamiento horizontales o verticales de la página, independientemente del tamaño de la página.

Solución

Antes de eliminar las barras de desplazamiento de una página web, considere si realmente las necesita. La imposibilidad de desplazarse por el contenido del documento dificulta que los visitantes del sitio vean la información. Si existe una necesidad urgente de crear delicias de diseño o el deseo de crear dificultades para sus lectores, entonces adelante. ¡Pero estás advertido!

El método se basa en utilizar la propiedad overflow, que se agrega al selector HTML, como se muestra en el ejemplo 1.

Ejemplo 1: página sin barras de desplazamiento

HTML5 CSS2.1 IE Cr Op Sa Fx

Barras de desplazamiento html (desbordamiento: oculto;) div (altura: 2000px;) Bla, bla

También puede usar la propiedad overflow-x para ocultar solo la barra de desplazamiento horizontal y overflow-y para ocultar la barra de desplazamiento vertical. El ejemplo 2 muestra cómo agregar una capa con un ancho mínimo de 800 píxeles. Cuando la ventana del navegador se reduce a este tamaño, la capa deja de cambiar de tamaño y aparece una barra de desplazamiento horizontal. La propiedad overflow-x oculta las barras de desplazamiento.

Ejemplo 2: sin barra de desplazamiento horizontal

HTML5 CSS3 IE Cr Op Sa Fx

Barras de desplazamiento html ( overflow-x: oculto; ) div ( min-width: 800px; /* Ancho mínimo */ fondo: #fc0; /* Color de fondo */ padding: 10px; /* Márgenes alrededor del texto */ ) Bla- paja

Las propiedades overflow-x y overflow-y son parte de la especificación CSS3 y no están validadas por comprobaciones de estilo CSS2.1.

Popular en la categoría: