Scrolling child div desplaza la ventana, ¿cómo lo detengo?

Tengo un div, con una barra de desplazamiento, cuando llega al final, mi página comienza a desplazarse. ¿Hay alguna forma de que pueda detener este comportamiento?

Puede desactivar el desplazamiento de toda la página haciendo algo como esto:

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>

Encontré la solución.

http://jsbin.com/itajok

Esto es lo que necesitaba.

Y este es el código.

http://jsbin.com/itajok/edit#javascript,html

Utiliza un complemento de jQuery.

Actualización por aviso de baja

Desde jquery-mousewheel :

El comportamiento anterior de añadir tres argumentos ( delta, deltaXy deltaY) al controlador de eventos ya no se utiliza y se eliminará en versiones posteriores.

Entonces, event.deltaYahora debe usarse:

var toolbox = $('#toolbox'),
    height = toolbox.height(),
    scrollHeight = toolbox.get(0).scrollHeight;

toolbox.off("mousewheel").on("mousewheel", function (event) {
  var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
  return !blockScrolling;
});

Manifestación

La solución seleccionada es una obra de arte. Pensé que era digno de un complemento ...

$.fn.scrollGuard = function() {
    return this
        .on( 'wheel', function ( e ) {
            var event = e.originalEvent;
            var d = event.wheelDelta || -event.detail;
            this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
        });
};    

Este ha sido un inconveniente continuo para mí y esta solución es tan limpia en comparación con otros trucos que he visto. Curioso por saber más sobre cómo funciona y qué tan ampliamente apoyado sería, pero saluda a Jeevan y a quienquiera que originalmente se le ocurrió esto. Por cierto, ¡el editor de respuestas de stackoverflow necesita esto!

ACTUALIZAR

Creo que esto es mejor porque no intenta manipular el DOM en absoluto, solo evita el burbujeo condicionalmente ...

$.fn.scrollGuard2 = function() {
  return this
    .on( 'wheel', function ( e ) {
      var $this = $(this);
      if (e.originalEvent.deltaY < 0) {
        /* scrolling up */
        return ($this.scrollTop() > 0);
      } else {
        /* scrolling down */
        return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
      }
    })
  ;
};    

Funciona muy bien en Chrome y mucho más simple que otras soluciones ... avíseme cómo le va en otros lugares ...

VIOLÍN

¿Podría usar un evento de mouseover en el div para deshabilitar la barra de desplazamiento del cuerpo y luego un evento de mouseout para activarlo nuevamente?

Por ejemplo, el HTML

<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
    content
</div>

Y luego el javascript así:

var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
    body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
    body.style.overflowY = 'auto';
}

Aquí hay una forma de hacer esto en varios navegadores en el eje Y, funciona en computadoras de escritorio y dispositivos móviles. Probado en OSX e iOS.

var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var deltaY = event.deltaY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
}, {passive:false});

scrollArea.addEventListener("touchstart", function(event) {
    this.previousClientY = event.touches[0].clientY;
}, {passive:false});

scrollArea.addEventListener("touchmove", function(event) {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var currentClientY = event.touches[0].clientY;
    var deltaY = this.previousClientY - currentClientY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
    this.previousClientY = currentClientY;
}, {passive:false});

Escribí resolviendo este problema

  var div;
  div = document.getElementsByClassName('selector')[0];

  div.addEventListener('mousewheel', function(e) {
    if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) {
      e.preventDefault();
      div.scrollTop = div.scrollHeight;
    } else if (div.scrollTop + e.deltaY <= 0) {
      e.preventDefault();
      div.scrollTop = 0;
    }
  }, false);

Si entiendo su pregunta correctamente, entonces desea evitar el desplazamiento del contenido principal cuando el mouse está sobre un div (digamos una barra lateral). Para eso, la barra lateral puede no ser un elemento secundario del contenedor de desplazamiento del contenido principal (que era la ventana del navegador), para evitar que el evento de desplazamiento se propague a su elemento principal.

Esto posiblemente requiera algunos cambios de marcado de la siguiente manera:

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 
<div id="sidebar"> 
</div> 

Vea que está funcionando en este violín de muestra y compárelo con este violín de muestra que tiene un comportamiento de salida del mouse ligeramente diferente de la barra lateral.

Consulte también desplazar solo un div en particular con la barra de desplazamiento principal del navegador .

Como se respondió aquí , la mayoría de los navegadores modernos ahora admiten la overscroll-behavior: none;propiedad CSS, que evita el encadenamiento de desplazamiento. Y eso es todo, ¡solo una línea!

esto deshabilita el desplazamiento en la ventana si ingresa el elemento selector. funciona como amuletos.

elements = $(".selector");

elements.on('mouseenter', function() {
    window.currentScrollTop = $(window).scrollTop();
    window.currentScrollLeft = $(window).scrollTop();
    $(window).on("scroll.prevent", function() {
        $(window).scrollTop(window.currentScrollTop);
        $(window).scrollLeft(window.currentScrollLeft);
    });
});

elements.on('mouseleave', function() {
    $(window).off("scroll.prevent");
});

Puede desactivar el desplazamiento de toda la página haciendo algo como esto, ¡pero mostrando la barra de desplazamiento!

<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>

$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
  var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
  var scrollTop = this.scrollTop;
  if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
    e.preventDefault();
  }
});

Basado en la respuesta de ceed, aquí hay una versión que permite anidar elementos protegidos por desplazamiento. Solo el elemento sobre el que se encuentra el mouse se desplazará y se desplazará con bastante suavidad. Esta versión también es reentrante. Se puede usar varias veces en el mismo elemento y eliminará y reinstalará correctamente los controladores.

jQuery.fn.scrollGuard = function() {
    this
        .addClass('scroll-guarding')
        .off('.scrollGuard').on('mouseenter.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g[0].myCst = $g.scrollTop();
            $g[0].myCsl = $g.scrollLeft();
            $g.off("scroll.prevent").on("scroll.prevent", function() {
                $g.scrollTop($g[0].myCst);
                $g.scrollLeft($g[0].myCsl);
            });
        })
        .on('mouseleave.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g.off("scroll.prevent");
        });
};

Una forma fácil de usar es agregar una clase, por ejemplo scroll-guard, a todos los elementos de la página en los que permite desplazarse. Luego úsalos $('.scroll-guard').scrollGuard()para protegerlos.

Si aplicas un overflow: hiddenestilo, debería desaparecer.

editar: de hecho, leí mal tu pregunta, eso solo ocultará la barra de desplazamiento, pero no creo que eso sea lo que estás buscando.

No pude hacer que ninguna de las respuestas funcionara en Chrome y Firefox, así que se me ocurrió esta fusión:

$someElement.on('mousewheel DOMMouseScroll', scrollProtection);

function scrollProtection(event) {
    var $this = $(this);
    event = event.originalEvent;
    var direction = (event.wheelDelta * -1) || (event.detail);
    if (direction < 0) {
        if ($this.scrollTop() <= 0) {
            return false;
        }
    } else {
        if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
            return false;
        }
    }
}