Esta es el arreglo más completa que encomtrarás brindar, pero primero mírala detenidamente y valora si se puede adaptar a tu proyecto.
Solución:
1) ¿Por qué las barras de desplazamiento son diferentes en el mismo sistema operativo y versión del navegador, pero en máquinas diferentes?
Esto probablemente tenga que ver con la configuración del sistema en macOS.
Si usted tiene Always seleccionado, estoy bastante seguro de que la barra de desplazamiento empuja el contenido de la página fuera del camino. Lo mismo ocurre con si tiene un mouse conectado. De lo contrario, tiene el comportamiento “absolutamente posicionado” que mencionaste. Tenga en cuenta que los usuarios de Windows probablemente verán un comportamiento similar al Always.
2) ¿Hay alguna forma de solucionar este problema sin ningún complemento? ¿Teniendo en cuenta que los usuarios de Windows tienen el caso 2 y los usuarios de MacOS el caso 1 o 2?
Bueno, primero un poco de opinión: no creo que sea una buena idea ocultar la barra de desplazamiento sin proporcionar otra pista al usuario que comunique la capacidad de desplazamiento del elemento. De todos modos, con eso fuera del camino, no puedo pensar en nada que no sea una especie de truco, pero aquí va:
Dado que esto es algo que solo debe ejecutarse una vez, y asumiendo que queremos una funcionalidad predecible en todos los navegadores y sistemas operativos, puede usar algo de JS aquí. En sistemas que persisten en la barra lateral, offsetWidth y scrollWidth las propiedades del elemento de la barra lateral serán diferentes. De forma predeterminada, su elemento podría tener los siguientes estilos:
$child-h-padding: 15px;
$max-scrollbar-width: 35px;
.r-sidebar
overflow-y: scroll;
padding: 12px $child-h-padding;
...rest
.r-sidebar--r-padded
padding-right: $child-h-padding + $max-scrollbar-width;
right: -$max-scrollbar-width;
Puede agregar / eliminar el .r-sidebar--r-padded clase basada en los valores de offsetWidth y scrollWidth.
Esta deberían funciona en todas partes, independientemente del navegador / sistema operativo. Ya probé en macOS / Chrome con ambas configuraciones de barra lateral.
Mover la barra de desplazamiento fuera de la vista de los usuarios no es un enfoque tan bueno para ocultar la barra de desplazamiento por completo.
¿Hay alguna forma de solucionar este problema sin ningún complemento?
¿Es esto lo que estás buscando?
.r-sidebar::-webkit-scrollbar display: none;
Esto ocultará su barra de desplazamiento en todos los navegadores Chrome. Dado que es específico para webkit, debería funcionar en diferentes sistemas operativos suponiendo que las versiones del navegador estén actualizadas.
Mas info aqui
Por qué las barras de desplazamiento son diferentes en el mismo sistema operativo y versión del navegador, pero en diferentes máquinas
No tengo una respuesta inmediata para esto, pero proporcione más detalles sobre las máquinas / versiones del sistema operativo / versiones del navegador, y haré todo lo posible para proporcionar detalles.
Tienes la opción de añadir valor a nuestra información cooperando tu experiencia en las anotaciones.