How to adjust the scroll bar :: - webkit-scrollbar-thumb

Question

How to adjust the scroll bar :: - webkit-scrollbar-thumb

Navigation

#1 by (0 votes)

1

I need to adjust the red bar so that it is smaller or can be replaced by an image.

I do not know how to do it and as much as I look for it I do not get it.

#cont{
	position: absolute;
	background-color: #2F4F4F;
	width: 50%;
	height: 50%;
	left: 25%;
	overflow-y: scroll;
}
.caja2 {
	position: initial;
	width: 100%;
	height: 10%;
	border-radius: 10px;
	background-color: #DCDCDC;
	padding-top: 2%;
	margin-top: 2%;

}

::-webkit-scrollbar{
    width: 25px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment{
    height:40px;
    background-color:yellow;
    background-size:25px 40px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement{
    height:40px;
    background-color:yellow;   
    background-size:25px 40px;
    background-repeat:no-repeat;
}

 
/* Handle */
::-webkit-scrollbar-thumb {
    background-color: red;
    border: 3px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

<!DOCTYPE html>
<html>
<head>
	<title>Prueba</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset='utf-8'>
	
</script>
</head>
<body>
	<div id='cont'>
		<div class='caja2'>Caja1</div>
		<div class='caja2'>Caja2</div>
		<div class='caja2'>Caja3</div>
		<div class='caja2'>Caja4</div>
		<div class='caja2'>Caja5</div>
		<div class='caja2'>Caja6</div>
	</div>
</body>
</html>

html css

asked by Sonia 25.04.2018 в 16:41

source

1 answer

Helper custom in Symfony Problem when going back when logging in (Laravel 5.2 php)

score 0 · Answer 1

You can add the following to your main stylesheet:

/* Cambiar estilo del scroll */
body::-webkit-scrollbar{
    width: 7px;
}
body::-webkit-scrollbar-thumb{
    background: #2196F3; /* color de la barra */
    border-radius: 4px;
}

This will modify the properties of scroll of body , so if you have a modal or some other element that contains a scroll you only add it in the list of selected elements.

NOTE: At the moment the browsers that use webkit are those that have the compatibility   to handle this with css, firefox requires handling with JS you can   use the following tutorial:

link

It looks like this: