javascript - style - ¿Cómo deshabilitar el desplazamiento temporalmente?
title css (30)
Estoy usando el plugin scrollTo jQuery y me gustaría saber si es posible desactivar temporalmente el desplazamiento en el elemento de la ventana a través de Javascript. La razón por la que me gustaría deshabilitar el desplazamiento es que cuando se desplaza mientras scrollTo está animando, se pone realmente feo;)
Por supuesto, podría hacer un $("body").css("overflow", "hidden"); y luego volver a ponerlo en automático cuando la animación se detenga, pero sería mejor si la barra de desplazamiento aún estuviera visible pero inactiva.
Almacene la longitud de desplazamiento en una variable global y recupérela cuando sea necesario.
var sctollTop_length = 0;
function scroll_pause(){
sctollTop_length = $(window).scrollTop();
$("body").css("overflow", "hidden");
}
function scroll_resume(){
$("body").css("overflow", "auto");
$(window).scrollTop(sctollTop_length);
}
¡La solución de galambalazs es genial! Funcionó perfectamente para mí tanto en Chrome como en Firefox. Y también se puede extender para evitar cualquier evento predeterminado desde la ventana del navegador. Digamos que estás haciendo una aplicación en el lienzo. Podrías hacer esto:
var events = {
preventDefault: function(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
},
//spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
//left: 37, up: 38, right: 39, down: 40
keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
keydown: function(e) {
for (var i = events.keys.length; i--;) {
if (e.keyCode === events.keys[i]) {
events.preventDefault(e);
return;
}
}
},
wheel: function(e) {
events.preventDefault(e);
},
disable: function() {
if (window.addEventListener) {
window.addEventListener(''DOMMouseScroll'', events.wheel, false);
}
window.onmousewheel = document.onmousewheel = events.wheel;
document.onkeydown = helpers.events.keydown;
},
enable: function() {
if (window.removeEventListener) {
window.removeEventListener(''DOMMouseScroll'', events.wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
}
Y luego, en su aplicación, digamos que va a procesar sus propios eventos, como el mouse, el teclado, los eventos táctiles, etc. Puede deshabilitar los eventos predeterminados cuando el mouse se encuentra dentro del lienzo y volver a habilitarlos cuando el mouse sale:
function setMouseEvents(canvas) {
var useCapture = false;
//Mouse enter event
canvas.addEventListener(''mouseenter'', function(event) {
events.disable();
}, useCapture);
//Mouse leave event
canvas.addEventListener(''mouseleave'', function(event) {
events.enable();
}, useCapture);
}
Incluso podría desactivar el menú del botón derecho con este truco:
function disableRightClickMenu(canvas) {
var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "white");
my_gradient.addColorStop(1, "white");
canvas.context.fillStyle = my_gradient;
canvas.context.fillRect(0, 0, canvas.width, canvas.height);
canvas.oncontextmenu = function() { return false; };
}
¿Qué tal esto? (Si estas usando jQuery)
var $window = $(window);
var $body = $(window.document.body);
window.onscroll = function() {
var overlay = $body.children(".ui-widget-overlay").first();
// Check if the overlay is visible and restore the previous scroll state
if (overlay.is(":visible")) {
var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
window.scrollTo(scrollPos.x, scrollPos.y);
}
else {
// Just store the scroll state
$body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
}
};
A partir de Chrome 56 y otros navegadores modernos, tiene que agregar passive:false a la llamada addEventListener para hacer que la preventDefault funcione. Así que uso esto para detener el desplazamiento en el móvil:
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener(''touchmove'', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener(''touchmove'', preventDefault, { passive: false });
}
Algo que acabo de juntar:
document.onwheel = function(e) {
// get the target element
target = e.target;
// the target element might be the children of the scrollable element
// e.g., "li"s inside an "ul", "p"s inside a "div" etc.
// we need to get the parent element and check if it is scrollable
// if the parent isn''t scrollable, we move up to the next parent
while (target.scrollHeight <= target.clientHeight) {
// while looping parents, we''ll eventually reach document.body
// since body doesn''t have a parent, we need to exit the while loop
if (target == document.body) {
break;
}
target = target.parentElement;
}
// we want this behaviour on elements other than the body
if (target != document.body) {
// if the scrollbar is at the top and yet if it still tries to scroll up
// we prevent the scrolling
if (target.scrollTop <= 0 && e.deltaY < 0) {
e.preventDefault();
}
// similarly, if the scrollbar is at the bottom and it still tries to scroll down
// we prevent it
else if (target.clientHeight + target.scrollTop >= target.scrollHeight && e.deltaY > 0) {
e.preventDefault();
}
}
};
body {
background: gainsboro;
}
#box {
width: 300px;
height: 600px;
padding: 5px;
border: 1px solid silver;
margin: 50px auto;
background: white;
overflow: auto;
}
<div id="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
Aquí está mi solución para detener el desplazamiento (no jQuery). Lo uso para deshabilitar el desplazamiento cuando aparece el menú lateral.
<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
if(noscroll_var){
document.getElementsByTagName("html")[0].style.overflowY = "";
document.body.style.paddingRight = "0";
noscroll_var = false
}else{
document.getElementsByTagName("html")[0].setAttribute(''style'', ''overflow-y: hidden !important'');
document.body.style.paddingRight = "17px";
noscroll_var = true
}
}/*noscroll()*/
</script>
<!-- Just to fill the page -->
<script>
for(var i=0; i <= 80; i++){
document.write(i + "<hr>")
}
</script>
Puse 17px de relleno a la derecha para compensar la desaparición de la barra de desplazamiento. Pero esto también es problemático, sobre todo para los navegadores móviles. Resuelto obteniendo el ancho de barra según this .
Aquí hay una manera muy básica de hacerlo:
window.onscroll = function () { window.scrollTo(0, 0); };
Es un poco nervioso en IE6.
Cancelar el evento como en la respuesta aceptada es un método horrible en mi opinión: /
En su lugar utilicé position: fixed; top: -scrollTop(); position: fixed; top: -scrollTop(); abajo.
Demostración: https://jsfiddle.net/w9w9hthy/5/
De mi proyecto emergente jQuery: https://github.com/seahorsepip/jPopup
//Freeze page content scrolling
function freeze() {
if($("html").css("position") != "fixed") {
var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
if(window.innerWidth > $("html").width()) {
$("html").css("overflow-y", "scroll");
}
$("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
}
}
//Unfreeze page content scrolling
function unfreeze() {
if($("html").css("position") == "fixed") {
$("html").css("position", "static");
$("html, body").scrollTop(-parseInt($("html").css("top")));
$("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
}
}
Este código tiene en cuenta los problemas de ancho, alto, barra de desplazamiento y salto de página.
Posibles problemas resueltos con el código anterior:
- ancho, cuando se establece la posición fija, el ancho del elemento html puede ser menor al 100%
- altura, igual que arriba
- Barra de desplazamiento: cuando se configura la posición fija, el contenido de la página ya no tiene una barra de desplazamiento, incluso cuando tenía una barra de desplazamiento antes de dar como resultado un salto de página horizontal.
- pagejump, cuando se establece la posición fija, la página scrollTop ya no es efectiva, lo que da como resultado 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, avíseme para poder agregar esas mejoras a mi proyecto.
De acuerdo con la publicación de galambalazs , agregaría soporte para dispositivos táctiles, lo que nos permite tocar pero no desplazarse hacia arriba o hacia abajo:
function disable_scroll() {
...
document.ontouchmove = function(e){
e.preventDefault();
}
}
function enable_scroll() {
...
document.ontouchmove = function(e){
return true;
}
}
Dependiendo de lo que quiera lograr con el desplazamiento eliminado, puede corregir el elemento del que desea eliminar el desplazamiento (al hacer clic, o cualquier otro disparador que desee para desactivar temporalmente el desplazamiento)
Estaba buscando una solución de "temp no scroll" y para mis necesidades, esto lo resolvió.
hacer una clase
.fixed{
position: fixed;
}
entonces con Jquery
var someTrigger = $(''#trigger''); //a trigger button
var contentContainer = $(''#content''); //element I want to temporarily remove scroll from
contentContainer.addClass(''notfixed''); //make sure that the element has the "notfixed" class
//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on(''click'', function(){
if(contentContainer.hasClass(''notfixed'')){
contentContainer.removeClass(''notfixed'').addClass(''fixed'');
}else if(contentContainer.hasClass(''fixed'')){
contentContainer.removeClass(''fixed'').addClass(''notfixed'');
};
});
Descubrí que esta era una solución lo suficientemente simple que funciona bien en todos los navegadores, y que también permite un uso simple en dispositivos portátiles (es decir, iPhones, tabletas, etc.). Dado que el elemento está arreglado temporalmente, no hay desplazamiento :)
¡NOTA! Dependiendo de la ubicación de su elemento "contentContainer", es posible que deba ajustarlo desde la izquierda. Lo que se puede hacer fácilmente agregando un valor css left a ese elemento cuando la clase fija está activa
contentContainer.css({
''left'': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it''s only pushed from one side)
});
El evento scroll no puede ser cancelado. Pero puedes hacerlo cancelando estos eventos de interacción:
Mouse & Touch scroll y Botones asociados al desplazamiento.
[ Demo de trabajo ]
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener(''DOMMouseScroll'', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener(''DOMMouseScroll'', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
El método más simple es:
$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily
Para deshacerlo:
$("body").css("overflow", "auto");
Fácil de implementar, pero el único inconveniente es:
- La página saltará un poco hacia la izquierda si está alineada en el centro (horizontalmente).
Esto se debe a que la barra de desplazamiento se elimina y la ventana gráfica se hace un poco más ancha.
Encontré esta respuesta en otro site :
Desactivar desplazamiento:
$( ".popup").live({
popupbeforeposition: function(event, ui) {
$("body").on("touchmove", false);
}
});
Después de cerrar la ventana emergente de desplazamiento:
$( ".popup" ).live({
popupafterclose: function(event, ui) {
$("body").unbind("touchmove");
}
});
Esta es la solución más simple que tengo hasta ahora. Y créeme, probé todos los demás y esta es la más fácil. Funciona a la perfección en los dispositivos Windows , que empujan la página desde la derecha para tener espacio para la barra de desplazamiento del sistema y los dispositivos IOS que no requieren espacio para sus barras de desplazamiento en los navegadores. Por lo tanto, al usar esto no tendrá que agregar relleno a la derecha para que la página no parpadee cuando oculte el desbordamiento del cuerpo o html con css .
La solución es bastante simple si lo piensas. La idea es darle a window.scrollTop () la misma posición exacta en el momento en que se abre una ventana emergente. También cambie esa posición cuando la ventana cambie de tamaño (ya que la posición de desplazamiento cambia una vez que sucede).
Así que, aquí vamos...
Primero creamos la variable que le permitirá saber que la ventana emergente está abierta y la llamamos stopWindowScroll . Si no lo hacemos, obtendrá un error de una variable no definida en su página y la configurará en 0, ya que no está activa.
$(document).ready(function(){
stopWindowScroll = 0;
});
Ahora, hagamos la función emergente abierta que puede ser cualquier función en su código que active cualquier ventana emergente que esté utilizando como complemento o personalizado. En este caso, será una simple ventana emergente personalizada con un simple documento sobre la función de clic.
$(document).on(''click'',''.open-popup'', function(){
// Saving the scroll position once opening the popup.
stopWindowScrollPosition = $(window).scrollTop();
// Setting the stopWindowScroll to 1 to know the popup is open.
stopWindowScroll = 1;
// Displaying your popup.
$(''.your-popup'').fadeIn(300);
});
Entonces, lo siguiente que hacemos es crear la función emergente de cierre, que repito de nuevo puede ser cualquier función que ya haya creado o esté utilizando en un complemento. Lo importante es que necesitamos esas 2 funciones para establecer la variable stopWindowScroll en 1 o 0 para saber cuándo está abierta o cerrada.
$(document).on(''click'',''.open-popup'', function(){
// Setting the stopWindowScroll to 0 to know the popup is closed.
stopWindowScroll = 0;
// Hiding your popup
$(''.your-popup'').fadeOut(300);
});
Luego, creamos la función window.scroll para que podamos evitar el desplazamiento una vez que el stopWindowScroll mencionado anteriormente se establece en 1, como activo.
$(window).scroll(function(){
if(stopWindowScroll == 1) {
// Giving the window scrollTop() function the position on which
// the popup was opened, this way it will stay in its place.
$(window).scrollTop(stopWindowScrollPosition);
}
});
Eso es.No se requiere CSS para que esto funcione, excepto sus propios estilos para la página. Esto funcionó como un encanto para mí y espero que te ayude a ti ya los demás.
Aquí hay un ejemplo de trabajo en JSFiddle:
Hagame saber si esto fue de utilidad. Saludos.
Esta solución mantendrá la posición de desplazamiento actual mientras el desplazamiento esté deshabilitado, a diferencia de algunos que hacen saltar al usuario de nuevo a la parte superior.
Se basa en la respuesta de galambalazs , pero con soporte para dispositivos táctiles y refaccionado como un solo objeto con envoltura de complemento jQuery.
function disableScrolling(){
var x=window.scrollX;
var y=window.scrollY;
window.onscroll=function(){window.scrollTo(x, y);};
}
function enableScrolling(){
window.onscroll=function(){};
}
Estaba buscando una solución para este problema, pero no estaba satisfecho con ninguna de las soluciones anteriores ( al momento de escribir esta respuesta ), por lo que se me ocurrió esta solución ...
CSS
.scrollDisabled {
position: fixed;
margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
width: 100%;
}
JS
var y_offsetWhenScrollDisabled=0;
function disableScrollOnBody(){
y_offsetWhenScrollDisabled= $(window).scrollTop();
$(''body'').addClass(''scrollDisabled'').css(''margin-top'', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
$(''body'').removeClass(''scrollDisabled'').css(''margin-top'', 0);
$(window).scrollTop(y_offsetWhenScrollDisabled);
}
Estoy usando showModalDialog , para mostrar la página secundaria como diálogo modal.
para ocultar las barras de desplazamiento de la ventana principal:
document.body.style.overflow = "hidden";
y al cerrar el diálogo modal, mostrando las barras de desplazamiento de la ventana principal:
document.body.style.overflow = "scroll";
Para acceder a los elementos en la ventana principal desde el diálogo:
parent.document.getElementById(''dialog-close'').click();
solo para cualquiera que showModalDialog sobre showModalDialog : (después de la línea 29 del código original)
document.getElementById(''dialog-body'').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById(''dialog-close'').addEventListener(''click'', function(e) {
e.preventDefault();
document.body.style.overflow = "scroll";//****
dialog.close();
});
Hazlo simplemente agregando una clase al cuerpo:
.stop-scrolling {
height: 100%;
overflow: hidden;
}
Agregue la clase y luego elimínela cuando desee volver a habilitar el desplazamiento, probado en IE, FF, Safari y Chrome.
$(''body'').addClass(''stop-scrolling'')
Para dispositivos móviles , deberás manejar el evento touchmove :
$(''body'').bind(''touchmove'', function(e){e.preventDefault()})
Y desatarse para volver a habilitar el desplazamiento. Probado en iOS6 y Android 2.3.3
$(''body'').unbind(''touchmove'')
La siguiente solución es básica pero pura JavaScript (no jQuery):
/**
* $.disablescroll
* Author: Josh Harrison - aloof.co
*
* Disables scroll events from mousewheels, touchmoves and keypresses.
* Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
*/
;(function($) {
"use strict";
var instance, proto;
function UserScrollDisabler($container, options) {
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
// left: 37, up: 38, right: 39, down: 40
this.opts = $.extend({
handleKeys : true,
scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
}, options);
this.$container = $container;
this.$document = $(document);
this.lockToScrollPos = [0, 0];
this.disable();
}
proto = UserScrollDisabler.prototype;
proto.disable = function() {
var t = this;
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", function(event) {
t._handleKeydown.call(t, event);
});
}
};
proto.undo = function() {
var t = this;
t.$container.off(".disablescroll");
if(t.opts.handleKeys) {
t.$document.off(".disablescroll");
}
};
proto._handleWheel = function(event) {
event.preventDefault();
};
proto._handleScrollbar = function() {
this.$container.scrollLeft(this.lockToScrollPos[0]);
this.$container.scrollTop(this.lockToScrollPos[1]);
};
proto._handleKeydown = function(event) {
for (var i = 0; i < 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[method]) {
instance[method].call(instance);
}
};
// Global access
window.UserScrollDisabler = UserScrollDisabler;
})(jQuery);
Lamento responder a una publicación anterior, pero estaba buscando una solución y me encontré con esta pregunta.
Existen muchas soluciones para que este problema muestre la barra de desplazamiento, como darle al contenedor una altura del 100% y un estilo de overflow-y: scroll .
En mi caso, acabo de crear un div con una barra de desplazamiento que muestro mientras agrego el overflow: hidden al cuerpo:
function disableScroll() {
document.getElementById(''scrollbar'').style.display = ''block'';
document.body.style.overflow = ''hidden'';
}
La barra de desplazamiento del elemento debe tener estos estilos:
overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;
Esto muestra una barra de desplazamiento gris, espero que ayude a futuros visitantes.
Mi opinión sobre este tema también incluye una preocupación con el ancho del cuerpo, ya que la página parece bailar un poco cuando ocultamos la barra de desplazamiento con overflow = "hidden" . El siguiente código funciona perfectamente para mí y está basado en un enfoque angular.
element.bind(''mouseenter'', function() {
var w = document.body.offsetWidth;
document.body.style.overflow = ''hidden'';
document.body.style.width = w + ''px'';
});
element.bind(''mouseleave'', function() {
document.body.style.overflow = ''initial'';
document.body.style.width = ''auto'';
});
Otra solución:
body {
overflow-y: scroll;
width: 100%;
margin: 0 auto;
}
De esta manera, siempre tiene una barra de desplazamiento vertical, pero como la mayoría de mi contenido es más largo que la ventana gráfica, esto está bien para mí. El contenido se centra en un div separado, pero sin establecer de nuevo el margen en el cuerpo, mi contenido se mantendrá a la izquierda.
Estas son las dos funciones que uso para mostrar mi ventana emergente / modal:
var popup_bodyTop = 0;
var popup_bodyLeft = 0;
function popupShow(id)
{
$(''#''+ id).effect(''fade'');
$(''#popup-overlay'').effect(''fade'');
// remember current scroll-position
// because when setting/unsetting position: fixed to body
// the body would scroll to 0,0
popup_bodyLeft = $(document).scrollLeft();
popup_bodyTop = $(document).scrollTop();
// invert position
var x = - popup_bodyLeft;
var y = - popup_bodyTop;
$(''body'').css(''position'', ''fixed'');
$(''body'').css(''top'', y.toString() +''px'');
$(''body'').css(''left'', x.toString() +''px'');
}
function popupHide(id)
{
$(''#''+ id).effect(''fade'');
$(''#popup-overlay'').effect(''fade'');
$(''body'').css(''position'', '''');
$(''html, body'').scrollTop(popup_bodyTop);
$(''html, body'').scrollLeft(popup_bodyLeft);
}
Resultado: fondo no desplazable y sin reubicación del contenido debido a la barra de desplazamiento izquierda. Probado con FF actual, Chrome e IE 10.
Puede bloquear el desplazamiento de la barra espaciadora y ocultar la barra de desplazamiento del navegador:
$(document).keydown(function(event) {
if (event.keyCode == 32) {
return false;
}
});
document.documentElement.style.overflow = ''hidden'';
document.body.scroll = ''no'';
Sé que esta es una pregunta antigua, pero tuve que hacer algo muy similar, y después de un tiempo buscando una respuesta y probando diferentes enfoques, terminé usando una solución muy fácil.
Mi problema fue muy similar, casi idéntico, la única diferencia es que no tuve que mostrar realmente la barra de desplazamiento, solo tenía que asegurarme de que su ancho todavía se usaría, por lo que el ancho de la página no cambiaría mientras se mostraba mi superposición .
Cuando comienzo a deslizar mi superposición en la pantalla, hago:
$(''body'').addClass(''stop-scrolling'').css(''margin-right'', 8);
y después de deslizar mi superposición fuera de la pantalla hago:
$(''body'').removeClass(''stop-scrolling'').css(''margin-right'', 0);
IMPORTANTE: esto funciona perfectamente porque mi superposición está en posición absolute , a la right: 0px cuando está visible .
Sobre la base de la respuesta de Cheyenne Forbes, y una que encontré aquí a través de fcalderan: ¿Deshabilita simplemente el desplazamiento para no ocultarlo? y para solucionar el problema de desaparición de la barra de desplazamiento de Hallodom.
CSS:
.preventscroll{
position: fixed;
overflow-y:scroll;
}
JS:
whatever.onclick = function(){
$(''body'').addClass(''preventscroll'');
}
whatevertoclose.onclick = function(){
$(''body'').removeClass(''preventscroll'');
}
Este código lo lleva a la parte superior de la página, pero creo que el código de Fcalderan tiene una solución alternativa.
Tengo el mismo problema, a continuación es la forma en que lo manejo.
/* file.js */
var body = document.getElementsByTagName(''body'')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");
/* file.css */
.no-scroll{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
espero que esto ayude.
Tengo un problema similar en los dispositivos táctiles. La adición de "touch-action: none" al elemento resolvió el problema.
Para más información. Mira esto:-
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Tuve un problema de animación similar en las pantallas de dispositivos móviles, pero no en las computadoras portátiles, cuando intentaba animar un div usando el comando animar de jquery. Así que decidí usar un temporizador que restauraba la posición de desplazamiento de la ventana con tanta frecuencia que a simple vista el documento parecería estático. Esta solución funcionó perfectamente en un dispositivo móvil de pantalla pequeña como Samsung Galaxy-2 o iphone-5.
Lógica principal de este enfoque : el temporizador para establecer la posición de desplazamiento de la ventana en la posición de desplazamiento original debe iniciarse antes del comando jquery animate, y luego, cuando se completa la animación, necesitamos borrar este temporizador (la original scroll position es la posición justo antes de que comience la animación) .
Me sorprendió gratamente que el documento aparecía estático durante la duración de la animación si el intervalo del temporizador era de 1 millisecond , que era lo que buscaba.
//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
window.scrollTo(xPosition, yPosition);
}, 1);
//animate the element emt
emt.animate({
left: "toggle",
top: "toggle",
width: "toggle",
height: "toggle"
}, 500, function() {
//when animation completes, we stop the timer
clearInterval(restoreTimer);
});
OTRA SOLUCIÓN que funcionó : Basándome en la respuesta de Mohammad Anini en esta publicación para habilitar / deshabilitar el desplazamiento, también encontré que funcionaba una versión modificada del código como se muestra a continuación.
//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//disable scrolling
window.onscroll = function() {
window.scrollTo(xPosition, yPosition);
};
//animate and enable scrolling when animation is completed
emt.animate({
left: "toggle",
top: "toggle",
width: "toggle",
height: "toggle"
}, 500, function() {
//enable scrolling when animation is done
window.onscroll = function() {};
});
Una solución simple que funcionó para mí (deshabilitando el desplazamiento de la ventana temporalmente).
Basado en este violín: http://jsfiddle.net/dh834zgw/1/
el siguiente fragmento (usando jquery) deshabilitará el desplazamiento de la ventana:
var curScrollTop = $(window).scrollTop();
$(''html'').toggleClass(''noscroll'').css(''top'', ''-'' + curScrollTop + ''px'');
Y en tu css:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}
Ahora, cuando elimines el modal, no olvides eliminar la clase noscroll en la etiqueta html:
$(''html'').toggleClass(''noscroll'');
Encontré una manera mejor, pero con errores, combinando la idea de sdleihssirhc:
window.onscroll = function() {
window.scrollTo(window.scrollX, window.scrollY);
//Or
//window.scroll(window.scrollX, window.scrollY);
//Or Fallback
//window.scrollX=window.scrollX;
//window.scrollY=window.scrollY;
};
No lo probé, pero lo editaré más tarde y se lo haré saber a todos. Estoy seguro al 85% de que funciona en los principales navegadores.