CSS: ¿Posible "empujar" las barras de desplazamiento de Webkit en el contenido?

Normalmente, una barra de desplazamiento se posiciona de esta manera:CSS: ¿Posible "empujar" las barras de desplazamiento de Webkit en el contenido?

________________________________________ 
|       |   | 
|   content   | scrollbar | 
|       |   | 
|       |   | 
|       |   | 
|       |   | 
|__________________________|___________|

básicamente estoy buscando tener un hueco entre una barra de desplazamiento "a medida" y el límite exterior de un contenedor desplazable:

________________________________________ 
|     |   |  | 
|  content  | scrollbar | gap | 
|     |  <  |  | 
|     |   |  | 
|     |   |  | 
|     |   |  | 
|____________________|___________|_____|

Usando una margin-right a ambos ::-webkit-scrollbar o ::-webkit-scrollbar-track-piece falla y el anuncio de las barras de desplazamiento de estilo, capaz de Webkit afirma:

Los márgenes son compatibles a lo largo del eje de la barra de desplazamiento. Pueden ser negativos (de modo que la pista puede, por ejemplo, inflarse para cubrir parcialmente los botones ).

Ahora estoy preguntando si alguien ha logrado empujar las barras de desplazamiento "en" el contenido (o fuera de la envoltura para el caso) por algún otro medio que margin.

Supongo que esto podría ser posible solo (si es que lo es) utilizando algún tipo de truco, ¿alguna idea?

Otras cosas que he intentado infructuosamente son padding-right: 10px y border-right: 10px solid rgba(255, 255, 255, 0) (un borde transparente).

Fuente

2011-07-16 polarblau

Creo que eso no es posible asignando un margen derecho a una barra de desplazamiento alineada a la derecha. La barra de desplazamiento es parte de la interfaz de usuario de la ventana y no se puede diseñar a través de CSS.

Sin embargo, puede crear un contenedor de contenido alrededor de todos los demás elementos de su HTML, otorgarle un ancho máximo, que es menor que el 100% y establecer overflow: scroll; para el contenedor. Esto logrará el efecto deseado y funcionará en casi todos los navegadores.

[opinión personal] Creo que es un hábito muy malo de ciertos diseñadores web, que quieren controlar cada parte de mi pantalla. Por ejemplo, las barras de desplazamiento deben ser diseñadas por el administrador de ventanas, no por el sitio web que estoy viendo actualmente.

Fuente

2011-07-16 20:12:48 feeela

Gracias por su respuesta. Y su solución funciona, por supuesto, está bien, pero realmente no responde mi pregunta (lo cual es cierto que es un experimento). Estoy de acuerdo más o menos con tu opinión personal también. Sin embargo, las cosas han cambiado desde que las personas han hecho cosas horribles con las barras de desplazamiento de IE. Estoy, por una parte, trabajando en una aplicación de navegador en la que la ventana principal no se puede desplazar. Por lo tanto, la barra de desplazamiento no es parte del cromo del navegador, sino más bien un elemento de entrada de una aplicación, no un sitio web. Pero eso también es solo una opinión personal. – polarblau

Por otro lado, si mueve la barra de desplazamiento de la ventana principal, ¿cómo usaría el nuevo espacio despejado? No puede mostrar nada si no hay elementos HTML para colocar los contenidos. Entonces eso es solo espacio vacío detrás de la barra de desplazamiento, incluso si logras que se mueva. – feeela

Espacio en blanco no es espacio inútil;) – polarblau

Puede hacerlo con un borde transparente. Pero debe establecer background-clip: padding-box; o no funcionará.

Ejemplo: http://jsfiddle.net/6KprJ/1/

Fuente

2013-06-28 09:53:39 passsy

Si bien este es un truco ingenioso, el borde parece aplicarse centrado alrededor de los contornos del pulgar, lo que efectivamente cambia la apariencia del pulgar también dependiendo de qué tan grueso sea el borde, ¿derecho? – polarblau

Lindo ejemplo! :) –

Esta debería ser la respuesta aceptada. –

CSS: ¿Posible "empujar" las barras de desplazamiento de Webkit en el contenido?

Respuesta

Cuestiones relacionadas