I am trying to customize the scrollbar on my webpage by changing its position and specifying a set height, such as 400px.
Currently, I can achieve this by adding padding/margin and adjusting the body's position. However, this solution disrupts the position of other elements on the website.
Here is an example:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background-image: url(http://www.lovethisgif.com/uploaded_images/121722-File-color-Square-Cm.gif-Wikimedia-Commons.gif);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>