Cuales son todas las PROPIEDADES para editar el SCROLLBAR del Body?

publicado por: Anonymous

Busco una Guia de todas la propieadades que existen para poder editar el SCROLLBAR asi como Observan las imagenes

introducir la descripción de la imagen aquí

_x000D_

_x000D_

::-webkit-scrollbar {_x000D_
  width: 10px;_x000D_
  height: 115px;_x000D_
}_x000D_
::-webkit-scrollbar-button {_x000D_
  width: 0px;_x000D_
  height: 0px;_x000D_
}_x000D_
::-webkit-scrollbar-thumb {_x000D_
  background: yellow;_x000D_
  border: 0px none #ffffff;_x000D_
  border-radius: 50px;_x000D_
}_x000D_
::-webkit-scrollbar-thumb:hover {_x000D_
  background:rgba(0,0,15,0.7);_x000D_
}_x000D_
::-webkit-scrollbar-thumb:active {_x000D_
  background: rgba(0,0,15,1);_x000D_
}_x000D_
::-webkit-scrollbar-track {_x000D_
  background: #666666;_x000D_
  border: 0px none #ffffff;_x000D_
  border-radius: 50px;_x000D_
}_x000D_
::-webkit-scrollbar-track:hover {_x000D_
  background: #666666;_x000D_
}_x000D_
::-webkit-scrollbar-track:active {_x000D_
  background: #333333;_x000D_
}_x000D_
::-webkit-scrollbar-corner {_x000D_
  background: transparent;_x000D_
}_x000D_
body { SCROLLBAR-FACE-COLOR:red; SCROLLBAR-HIGHLIGHT-COLOR: brown; SCROLLBAR-SHADOW-COLOR: #6699CC; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #E3E3E3; SCROLLBAR-DARKSHADOW-COLOR: #000000; }

_x000D_

<div class="grid-6">_x000D_
		<div class="col"> Un Col 1</div>_x000D_
		<div class="col"> Un Col 2</div>_x000D_
	</div>_x000D_
	<div class="grid-3_xs-3">_x000D_
		<div class="col-3_xs-10"> Un Col 3</div>_x000D_
		<div class="col-3_xs-4"> Un Col 4</div>_x000D_
		<div class="col-3_xs-7"> Un Col 5</div>_x000D_
		<div class="col-3_xs-8" data-push-left="off-2"> Un Col 6</div>_x000D_
	</div>_x000D_
	<div class="grid-6">_x000D_
		<div class="col"> Un Col 1</div>_x000D_
		<div class="col"> Un Col 2</div>_x000D_
	</div>_x000D_
	<div class="grid-3_xs-3">_x000D_
		<div class="col-3_xs-10"> Un Col 3</div>_x000D_
		<div class="col-3_xs-4"> Un Col 4</div>_x000D_
		<div class="col-3_xs-7"> Un Col 5</div>_x000D_
		<div class="col-3_xs-8" data-push-left="off-2"> Un Col 6</div>_x000D_
	</div>

_x000D_

_x000D_

_x000D_

solución

Existen diferentes atributos para poder modificar el scroll aqui listo algunos:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

webkit-scrollbar

puedes empezar por aqui:

W3school – Custom Scrollbar

aunque si lo que buscas es un plugin:

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *