Escenario de la aplicación: hay varias barras de desplazamiento en la página o hay módulos que requieren el desplazamiento del mouse. En este momento, es necesario deshabilitar el evento de desplazamiento del navegador y la página no tiembla.
1. Configure globalmente el estilo de la barra de desplazamiento (scss)
Nota: Si no establece el ancho de la barra de desplazamiento, debe calcular el ancho de la barra de desplazamiento cuando el desplazamiento de la página está deshabilitado, de lo contrario, hará que la página se mueva.
::-webkit-scrollbar {
width: 7px; // 固定滚动条宽度
}
::-webkit-scrollbar-thumb {
border-radius: 14px;
-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
background: rgba(144, 147, 153, 0.3);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
border-radius: 0;
background: none;
}
2. Deshabilite el desplazamiento de la página: configure la posición de la página como "fija", fije la página a la altura especificada y configure el ancho de la página de acuerdo con los requisitos.
Nota: El ancho de la página debe restarse del ancho de la barra de desplazamiento; de lo contrario, la página se sacudirá y afectará la experiencia del usuario.
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let dom = document.getElementById("app");
dom.style.position = "fixed";
dom.style.top = "-" + scrollTop + "px";
dom.style.width = "calc(100% - 7px)"; // 7px为滚动条宽度3. Deshabilitar el desplazamiento de página
let dom = document.getElementById("app");
let scrollTop = Math.abs(parseFloat(dom.style.top));
dom.style.position = "";
dom.style.top = "";
dom.style.width = "100%";
if (document.body) {
document.body.scrollTop = scrollTop;
}
if (document.documentElement) {
document.documentElement.scrollTop = scrollTop;
}