Deshabilite el desplazamiento general de la página causado por el desplazamiento del mouse en un área específica

Recibí una solicitud de corrección de errores hoy: cuando el usuario continúa desplazando el mouse en la parte inferior de la barra de menú izquierda, el contenido principal de la derecha se desplaza. Esto debería estar prohibido, es decir, el desplazamiento de la barra de menú no debería afectar el contenido principal a la derecha.

¡Acostúmbrate a escribir juntos! Este es el cuarto día de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de abril", haga clic para ver los detalles del evento .

Después de un poco de investigación y búsqueda de datos, se me ocurrieron dos soluciones:

• Cuando el mouse ingresa al área inferior a la izquierda, la barra de desplazamiento del contenedor de contenido principal está oculta y la barra de desplazamiento está oculta y, naturalmente, no se puede desplazar.
• Agregue eventos de escucha de desplazamiento en el área inferior izquierda para evitar el comportamiento predeterminado (es decir, el comportamiento de activar y propagar el desplazamiento de la página)

ocultar barra de desplazamiento

Para ocultar la barra de desplazamiento de un elemento necesitamos el siguiente estilo:

.container.disable-scrollbar {
  /* hide scrollbar in firefox */
  scrollbar-width: none;
}
.container.disable-scrollbar::-webkit-scrollbar {
  display: none;
}
复制代码

Necesitamos ocultar la barra de desplazamiento cuando el mouse ingresa al área inferior izquierda y mostrarla cuando el mouse se mueve fuera del área inferior izquierda. No está oculta de forma predeterminada:

const bottomEleContainer = ...
const mainEleContainer = ....
bottomEleContainer.addEventListener('mouseenter',()=>{
    //激活上述样式
    mainEleContainer.className = 'disable-scrollbar'
})
bottomEleContainer.addEventListener('mouseleave',()=>{
    //取消激活上述样式
    mainEleContainer.className = ''
})
复制代码

Impedir el comportamiento predeterminado de la rueda del ratón

Aquí necesitamos agregar un detector de eventos de la rueda del mouse al elemento:

bottomEleContainer.addEventListener('wheel', (e)=>{
  //阻止默认行为（页面的滚动行为）
  e.preventDefault()
},{
  //这里一定要显式设置为false，因为默认是true
  passive: false,
})
复制代码

Si usa el método que Reactdebe evitar onWheella forma directa de escuchar directamente en el nodo, pero useRefobtiene la aplicación del nodo DOM a través del método similar a un gancho y luego usa la forma nativa de escuchar mencionada anteriormente, recuerde devolver la eliminación código del detector de eventos en el gancho.

Resumir

Las desventajas del primero son más obvias:

• código css adicional (incluido el código de compatibilidad)
• El cambio de la visibilidad de la barra de desplazamiento provocará cambios en el tamaño del cuadro de contenido en la página, y el cambio en el tamaño del cuadro de contenido hará que la página se reorganice.
• Hay un cierto acoplamiento, una vez que se cambia el contenedor de la página principal y no se sincroniza a tiempo, el código fallará

Veamos el segundo. No tiene las deficiencias anteriores y es más simple. Decidí elegir el segundo.