Benutzerdefinierte Scrollbar Divblöcke Rad Scrollen auf Schwebe ⇐ HTML

[Anonymous]

Ich versuche, eine benutzerdefinierte Bildlaufleiste mit einem DIV -Element zu erstellen. Die Scrollbar selbst funktioniert gut, aber ich habe ein Problem bemerkt: < /p>
Wenn ich meinen Mauszeiger über die Scrollbar -Spur oder den Daumen platziere (wie im Bild unten gezeigt, scrollen Sie das Mausrad nicht richtig und scrollen Sie den Inhalt. src = "https://i.sstatic.net/tmgnr5lj.png"/>
Hier ist mein Code:

Code: Select all

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";
}

Issue:

[*]When I hover over the custom scrollbar track (green area) or the scrollbar thumb (gray area), scrolling with the mouse wheel does not work.

Scrolling works fine when the mouse is outside the Scrollbar -Bereich.>