Mi problema es que la barra de desplazamiento vertical de ventanas del navegador que se elimina, por ejemplo, overflow:hidden; hará que la página salte, cuando vuelva a aparecer más tarde. Puedo usar jQuery para eliminar la opción de desplazamiento por parte del visitante, mientras que un script se está ejecutando y desplazar la página hacia un punto específico, y luego hacer que vuelva a aparecer de nuevo después:Cómo hacer un marcador de posición de barra de desplazamiento
www.nebulafilm.dk/index.html?content
¿Puedo hacer un marcador de posición para la barra de desplazamiento, cuando no está presente, por lo que no va a saltar volver?
¿O es posible "desactivarlo" y tenerlo "atenuado"?
No encuentro ninguna solución buscando. He encontrado algo similar aquí: stackoverflow.com donde la barra de desplazamiento siempre está allí. Pero la diferencia es que la barra de desplazamiento debe permanecer desactivada, incluso si la página es más larga que la ventana. Solo debe ser "activado" nuevamente a través de otro script que controlo.
¿Es esto de alguna manera posible?
Gracias.
Actualización:
Tiempo para una actualización de estado.
Tuve algunos problemas con la imagen de fondo de la nube de estrellas, que se configuró en la etiqueta body.
Cuando el script jQuery (de la respuesta de los locos) agrega el relleno a la etiqueta html y, por lo tanto, debe insertar todos los elementos en la página de la izquierda, la imagen de fondo todavía no se comportó correctamente.
Bueno, descubrí que el elemento body no reacciona como cualquier elemento div. No es solo un "bloque" dentro de la etiqueta html como cualquier otro elemento de bloque. Tiene sus propios comportamientos y aparentemente no puede ser engañado de la misma manera. Por lo tanto, la imagen de fondo era imposible de tocar, mientras estaba en body.
Pero me tomó un tiempo para darse cuenta ...
La solución final a esto es así volteando estúpidamente simple que yo estaba a punto de llorar al enterarse, pensando en las interminables (que podría exagerar un poco) horas de investigando el body.
Simplemente envolví todo en un <div id="body"> y le di la imagen de fondo en su lugar. De repente, todo cayó en su lugar.
Desde:
<body>
...
</body>
Y
body {background-image: url(...);}
Para:
<body>
<div id="body">
...
</div>
</body>
Y:
#body {background-image: url(...);}
Un d un poco más sabio sobre el body.
No más "saltos". Delicioso.
El efecto ahora se está ejecutando por completo y casi no nota un cambio con la barra de desplazamiento y cada detalle se ajusta. El guión de Cwolve es perfecto y hace el cálculo exacto:
function getScrollBarWidth(){
var div = $('<div><div>' + new Array(100).join('content<br />') + '</div></div>'),
div2 = div.find('div'),
body = $(document.body);
div.css({ overflow : 'hidden', width: 100, height: 100, position : 'absolute', left : -1000, top : -1000 });
body.append(div);
var width1 = div2.width();
div.css({ overflow : 'auto' });
var width2 = div2.width();
div.remove();
return width1 - width2;
}
El getScrollBarWidth() contendrá exactamente el ancho de la barra de desplazamiento sin importar el navegador, y lo puedo usar para agregar y quitar rellenos como yo quiero:
var sWidth = getScrollBarWidth();
$("body").css({'overflow': 'hidden'});
$("html").css({'padding-right': sWidth});
$('html, body').delay(1000).animate({
scrollTop: $(hash).offset().top - 170
}, 2000, 'swing', function(){
$("body").css({'overflow': 'auto'});
$("html").css({'padding-right': 0});
});
Muchas gracias. Esta fue una buena idea.
Sí, esa es una solución, si no es posible la manipulación directa de la barra de desplazamiento. Pero dependerá del navegador y es un trabajo laborioso. – Steeven
¿Cómo es laborioso? Le di una demostración que calcula el ancho de la barra de desplazamiento :) La implementación real requiere que agregue la función que hice y un enorme 3 líneas de código, que también están en la demostración (simplemente cambie los selectores). –
Bueno, tendrá que encontrar el ancho exacto de la barra de desplazamiento para cada tipo de navegador e implementar algún tipo de comprobación del navegador. Y aún así no será una solución segura. Pero es una parte del camino, y una posible solución, así que gracias por la respuesta. – Steeven