What are all the PROPERTIES to edit the SCROLLBAR of the Body?

Navigation
0

I'm looking for a guide to all the properties that exist to be able to edit the SCROLLBAR as well as observe the images 

::-webkit-scrollbar {
  width: 10px;
  height: 115px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: yellow;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background:rgba(0,0,15,0.7);
}
::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,15,1);
}
::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
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; }
<div class="grid-6">
		<div class="col"> Un Col 1</div>
		<div class="col"> Un Col 2</div>
	</div>
	<div class="grid-3_xs-3">
		<div class="col-3_xs-10"> Un Col 3</div>
		<div class="col-3_xs-4"> Un Col 4</div>
		<div class="col-3_xs-7"> Un Col 5</div>
		<div class="col-3_xs-8" data-push-left="off-2"> Un Col 6</div>
	</div>
	<div class="grid-6">
		<div class="col"> Un Col 1</div>
		<div class="col"> Un Col 2</div>
	</div>
	<div class="grid-3_xs-3">
		<div class="col-3_xs-10"> Un Col 3</div>
		<div class="col-3_xs-4"> Un Col 4</div>
		<div class="col-3_xs-7"> Un Col 5</div>
		<div class="col-3_xs-8" data-push-left="off-2"> Un Col 6</div>
	</div>
    
asked by Gamez 06.01.2018 в 02:03
source

2 answers

1

There are different attributes to be able to modify the scroll here some ready: 

::-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 */ }

You can start here:

  

W3school - Custom Scrollbar

although if you are looking for a plugin:

answered by 06.01.2018 / 03:58
source
0

With CSS you can not do it in a way that is functional for all major browsers. While it is true that there are some browsers, (such as Chrome, IE's, Opera ...) that each have their own proprietary group to stylize some elements of them, others like Firefox completely lack them.

Via CSS you could change its appearance with the help of CSS merge modes (in those that support it) or do what scripts do: hide the bars and create other elements and give them styles. But it has its limitations and inconsistencies.

So the only "effective" is that you turn to javascript. There are countless bookstores for this.

If you want or need to expand on what is said in the following article you have more information: link

Greetings

    
answered by 06.01.2018 в 15:22
Clubs and decks, how to hand out different hands? POO Direct print without preview with asp.net/javascript