It might be too late, but still. For those who have not been helped by any method I suggest making custom scrollbar bar in pure javascript.
For a start, disable the standard scrollbar in style.css
::-webkit-scrollbar{
width: 0;
}
Now let's create the scrollbar container and the scrollbar itself
<!DOCTYPE HTML>
<html lang="ru">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="main.js"></script>
...meta
</head>
<body>
<div class="custom_scroll">
<div class="scroll_block"></div>
</div>
...content
<script>customScroll();</script>
</body>
</html>
at the same time, we will connect the customScroll() function, and create it in the file main.js
function customScroll() {
let scrollBlock = documentSite.querySelector(".scroll_block");
let body = documentSite.querySelector("body");
let screenSize = screenHeight - scrollBlock.offsetHeight;
documentSite.addEventListener("scroll", () => {
scrollBlock.style.top = (window.pageYOffset / body.offsetHeight * (screenSize + (screenSize * (body.offsetHeight - (body.offsetHeight - screenHeight)) / (body.offsetHeight - screenHeight)) )) + "px";
});
setScroll(scrollBlock, body);
}
function setScroll(scrollBlock, body) {
let newPos = 0, lastPos = 0;
scrollBlock.onmousedown = onScrollSet;
scrollBlock.onselectstart = () => {return false;};
function onScrollSet(e) {
e = e || window.event;
lastPos = e.clientY;
document.onmouseup = stopScroll;
document.onmousemove = moveScroll;
return false;
}
function moveScroll(e) {
e = e || window.event;
newPos = lastPos - e.clientY;
lastPos = e.clientY;
if(scrollBlock.offsetTop - newPos >= 0 && scrollBlock.offsetTop - newPos <= Math.ceil(screenHeight - scrollBlock.offsetHeight)) {
window.scrollBy(0, -newPos / screenHeight * body.offsetHeight);
}
}
function stopScroll() {
document.onmouseup = null;
document.onmousemove = null;
}
}
adding styles for the scrollbar
.custom_scroll{
width: 0.5vw;
height: 100%;
position: fixed;
right: 0;
z-index: 100;
}
.scroll_block{
width: 0.5vw;
height: 20vh;
background-color: #ffffff;
z-index: 101;
position: absolute;
border-radius: 4px;
}
Done!
