Кастомный скроллбар

<!--Кастомный скроллбар
https://mt-webdesign.ru/scrollbar-v1-->
<script src='https://matilda-design.ru/library/SmoothScroll.js'></script>
<div class="custom-wrapper-md"><div class="custom-scrollbar-md"><div class="custom-scrollbar-thumb-md"></div></div></div>
<style>
:root {
--ThumbColor: #454545; /*Цвет ползунка*/
--ScrollbarColor: transparent; /*Цвет фона скроллбара*/
--ThumbImg: url('https://static.tildacdn.com/tild3037-3037-4636-b733-343436373333/abstract_pattern_des.jpg'); /*Фоновое изображение*/
--ThumbBorder: 1000px; /*Скругление углов у ползунка*/
--ThumbOpacity: 1; /*Прозрачность ползунка*/
--ThumbOpacityActive: 1; /*Прозрачность ползунка по наведению*/
--ThumbWidth: 8px; /*Ширина ползунка в пасивном состоянии*/
--ThumbWidthActive: 12px; /*Ширина ползунка по наведению*/
--ScrollbarHeight: 99vh; /*Высота скроллбара*/
--ScrollbarPaddingRight: 3px; /*Отсуп справа*/
}
</style>
<script>
let timer;
let timerDuration = 1500; // Время в миллисекундах, когда ползунок исчезнет
SmoothScroll({
animationTime: 800, // Время анимации прокрутки
stepSize: 75, // Размер шага прокрутки в пикселях
accelerationDelta: 30, // Ускорение скроллаs
accelerationMax: 2, // Максимальное ускорение
keyboardSupport: true, // Поддержка клавиатуры
arrowScroll: 50, // Шаг прокрутки стрелками на клавиатуре в пикселях
pulseAlgorithm: true, // Алгоритм пульсации
pulseScale: 4, // Масштаб пульсации
pulseNormalize: 1, // Нормализация пульсации
touchpadSupport: true, // Поддержка тачпада
});
</script>
<!--Ниже не трогать-->
<style>
@media screen and (max-width: 5000px) and (min-width: 768px) {
.custom-scrollbar-md {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
height: var(--ScrollbarHeight);
width: var(--ThumbWidth);
margin-left: 30px;
margin-right: var(--ScrollbarPaddingRight);
background: var(--ScrollbarColor);
transition-duration: 0.3s;
overflow: hidden;
}
.custom-wrapper-md {
width: 30px;
position: fixed;
top: 0;
right: 0;
pointer-events: all;
background: transparent;
height: 100vh;
}
.custom-scrollbar-thumb-md {
width: 100%;
background-image: var(--ThumbImg);
background-color: var(--ThumbColor);
background-size: cover;
border-radius: var(--ThumbBorder);
position: absolute;
top: 0;
opacity: var(--ThumbOpacity);
transition: opacity 0.7s;
left: 0;
transform: translateY(0); 
cursor: grab;
}
.custom-scrollbar-thumb-md:active {
cursor: grabbing;
opacity: var(--ThumbOpacityActive);
}
.custom-scrollbar-thumb-md:hover, .custom-wrapper-md:hover .custom-scrollbar-thumb-md {
opacity: var(--ThumbOpacityActive);
}
.custom-wrapper-md:hover .custom-scrollbar-md, .custom-wrapper-md:active .custom-scrollbar-md {
width: var(--ThumbWidthActive);
}
.custom-scrollbar-thumb-md.hide {
opacity: 0;
}
::-webkit-scrollbar {
width: 0px;
background-color: transparent; 
}
::-webkit-scrollbar-thumb {
background-color: transparent;
}
.uc-scroll-md {
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
top: 0;
}
.uc-scroll-md .custom-scrollbar-md {
pointer-events: all;
}
.uc-scroll.active-md {
pointer-events: all;
}
.uc-scroll.active-md .custom-scrollbar-md {
pointer-events: all;
}
.custom-scrollbar-thumb-md {
user-select: none;
}
.custom-scrollbar-thumb-md:active {
user-select: none;
}
.custom-scrollbar-thumb-md:hover, 
.custom-wrapper-md:hover .custom-scrollbar-thumb-md {
user-select: none;
}
.custom-wrapper-md:hover .custom-scrollbar-md, 
.custom-wrapper-md:active .custom-scrollbar-md {
user-select: none;
}
body {
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
body {
scrollbar-width: none;
}
@-moz-document url-prefix() {
html {
scrollbar-width: none;
}
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const thumb = document.querySelector('.custom-scrollbar-thumb-md');
const scrollbar = document.querySelector('.custom-scrollbar-md');
const ucScroll = document.querySelector('.uc-scroll-md');
let isDragging = false;
let startY, startThumbTop;
function updateThumbHeight() {
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;
const thumbHeight = clientHeight / scrollHeight * clientHeight;
thumb.style.height = thumbHeight + 'px';
}
function updateScroll() {
const scrollPercentage = thumb.offsetTop / (scrollbar.offsetHeight - thumb.offsetHeight);
const scrollAmount = scrollPercentage * (document.documentElement.scrollHeight - window.innerHeight);
window.scrollTo(0, scrollAmount);
}
function resetTimer() {
clearTimeout(timer); 
timer = setTimeout(function() {
thumb.classList.add('hide'); 
}, timerDuration); 
}
updateThumbHeight();
resetTimer(); 
window.addEventListener('resize', updateThumbHeight); 
window.addEventListener('scroll', function () {
thumb.classList.remove('hide'); 
const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
const thumbPosition = scrollPercentage * (scrollbar.offsetHeight - thumb.offsetHeight);
thumb.style.top = thumbPosition + 'px';
resetTimer(); 
});
thumb.addEventListener('mousedown', function (e) {
isDragging = true;
startY = e.clientY;
startThumbTop = thumb.offsetTop;
resetTimer(); 
});
document.addEventListener('mousemove', function (e) {
if (!isDragging) return;
const deltaY = e.clientY - startY;
thumb.style.top = Math.min(scrollbar.offsetHeight - thumb.offsetHeight, Math.max(0, startThumbTop + deltaY)) + 'px';
updateScroll();
resetTimer(); 
});
thumb.addEventListener('mouseenter', function () {
clearTimeout(timer);
});
thumb.addEventListener('mouseleave', function () {
resetTimer();
});
document.addEventListener('mouseup', function () {
isDragging = false;
resetTimer(); 
});
scrollbar.addEventListener('mouseenter', function () {
thumb.classList.remove('hide');
thumb.classList.add('active');
ucScroll.classList.add('active');
});
scrollbar.addEventListener('mouseleave', function () {
ucScroll.classList.remove('active');
resetTimer(); 
});
scrollbar.addEventListener('mousedown', function () {
thumb.classList.remove('hide');
thumb.classList.add('active');
ucScroll.classList.remove('active');
resetTimer(); 
});
scrollbar.addEventListener('mouseup', function () {
resetTimer(); 
});
});
</script>