Пользовательская прокрутка блоков Div Blocks Прокрутка колеса на падении ⇐ CSS

[Anonymous]

Я пытаюсь создать пользовательскую прокрутку с использованием элемента Div. Сама полоса прокрутки работает хорошо, но я заметил проблему: < /p>
Когда я помещаю свой курсор мыши на дорожку прокрутки или большой палец (как показано на изображении ниже, зеленые и серые участки), прокрутка колеса мыши не имеет правильного скручивания. src = "https://i.sstatic.net/tmgnr5lj.png"/>
Вот мой код:




Custom Floating Scrollbar

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

main {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}

.scroll-content {
width: 100%;
height: 100%;
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
}

.scroll-content::-webkit-scrollbar {
display: none; /* Chrome */
}

.custom-scrollbar {
position: absolute;
top: 0;
right: 30px;
width: 50px;
height: 100%;
background-color: #3CB521;
}

.scroll-thumb {
width: 100%;
height: 50px;
background: gray;
position: absolute;
top: 0;
transition: background 0.2s;
padding-right: 30px;
}

.scroll-thumb::after {
content: "";
position: absolute;
top: 0;
right: -30px;
width: 30px;
height: 100%;
background: transparent;
}

.scroll-thumb:hover, .scroll-thumb:active {
background: black;
}

section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
font-size: 8em;
}

section:nth-child(1) {
background: #fff2cc;
}

section:nth-child(2) {
background: #e2f0d9;
}

section:nth-child(3) {
background: #deebf7;
}

section:nth-child(4) {
background: #fbe5d6;
}






1
2
3
4





const content = document.querySelector('.scroll-content');
const scrollbar = document.querySelector('.custom-scrollbar');
const thumb = document.querySelector('.scroll-thumb');

function updateThumbHeight() {
let contentHeight = content.scrollHeight;
let visibleHeight = content.clientHeight;
let thumbHeight = Math.max((visibleHeight / contentHeight) * visibleHeight, 10);
thumb.style.height = `${thumbHeight}px`;
}

function syncThumbPosition() {
let scrollRatio = content.scrollTop / (content.scrollHeight - content.clientHeight);
let maxThumbTop = scrollbar.clientHeight - thumb.clientHeight;
thumb.style.top = `${scrollRatio * maxThumbTop}px`;
}

content.addEventListener('scroll', () => {
requestAnimationFrame(syncThumbPosition);
sessionStorage.setItem("scrollPosition", content.scrollTop);
}, {passive: true});

window.addEventListener('load', () => {
updateThumbHeight();
let savedScrollPosition = sessionStorage.getItem("scrollPosition");
if (savedScrollPosition !== null) {
content.scrollTop = parseInt(savedScrollPosition, 10);
syncThumbPosition();
}
});

let isDragging = false, startY, startScrollTop;

thumb.addEventListener('mousedown', (e) => {
isDragging = true;
startY = e.clientY;
startScrollTop = content.scrollTop;
document.body.style.userSelect = 'none';
});

document.addEventListener('mouseup', () => {
isDragging = false;
document.body.style.userSelect = '';
});

document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
let deltaY = e.clientY - startY;
let scrollRatio = (content.scrollHeight - content.clientHeight) / (scrollbar.clientHeight - thumb.clientHeight);
content.scrollTop = startScrollTop + deltaY * scrollRatio;
});

window.addEventListener('resize', () => {
updateThumbHeight();
syncThumbPosition();
});

if ('scrollRestoration' in history) {
history.scrollRestoration = "manual";
}




< /code>
проблема < /strong>: < /p>

Когда я наводняю на пользовательскую дорожку Scrollbar (зеленая область) или палец для прокрутки (серая область), прокрутка с колесом мыши не работает. Область прокрутки.>

Подробнее здесь: https://stackoverflow.com/questions/794 ... g-on-hover