Elgato_dark/void
1
0
Fork 0
mirror of https://github.com/voideditor/void synced 2026-05-24 09:58:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

scrollbar fix

Browse source
This commit is contained in:
Mathew Pareles 2025-02-17 00:23:48 -08:00
parent 74f8303803
commit 89d08071fc
1 changed files with 66 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/vs/workbench/contrib/void/browser/react/src/util/useScrollbarStyles.tsx
View file

@ -19,90 +19,87 @@ export const useScrollbarStyles = (containerRef: React.MutableRefObject<HTMLDivE
...Array.from(containerRef.current?.querySelectorAll(overflowSelector) || []) ...Array.from(containerRef.current?.querySelectorAll(overflowSelector) || [])
]; ];
// Clean up existing elements first // Apply basic styling to all elements
scrollElements.forEach(element => { scrollElements.forEach(element => {
if ((element as any).__scrollbarCleanup) { element.classList.add('void-scrollable-element');
(element as any).__scrollbarCleanup();
}
}); });
// Apply styles and listeners to each scroll element // Only initialize fade effects for elements that haven't been initialized yet
scrollElements.forEach(element => { scrollElements.forEach(element => {
// Add the scrollable class directly to the overflow element if (!(element as any).__scrollbarCleanup) {
element.classList.add('void-scrollable-element'); let fadeTimeout: NodeJS.Timeout | null = null;
let fadeInterval: NodeJS.Timeout | null = null;
let fadeTimeout: NodeJS.Timeout | null = null; const fadeIn = () => {
let fadeInterval: NodeJS.Timeout | null = null; if (fadeInterval) clearInterval(fadeInterval);
const fadeIn = () => { let step = 0;
if (fadeInterval) clearInterval(fadeInterval); fadeInterval = setInterval(() => {
if (step <= 10) {
element.classList.remove(`show-scrollbar-${step - 1}`);
element.classList.add(`show-scrollbar-${step}`);
step++;
} else {
clearInterval(fadeInterval!);
}
}, 10);
};
let step = 0; const fadeOut = () => {
fadeInterval = setInterval(() => { if (fadeInterval) clearInterval(fadeInterval);
if (step <= 10) {
element.classList.remove(`show-scrollbar-${step - 1}`); let step = 10;
element.classList.add(`show-scrollbar-${step}`); fadeInterval = setInterval(() => {
step++; if (step >= 0) {
} else { element.classList.remove(`show-scrollbar-${step + 1}`);
clearInterval(fadeInterval!); element.classList.add(`show-scrollbar-${step}`);
step--;
} else {
clearInterval(fadeInterval!);
}
}, 60);
};
const onMouseEnter = () => {
if (fadeTimeout) clearTimeout(fadeTimeout);
if (fadeInterval) clearInterval(fadeInterval);
fadeIn();
};
const onMouseLeave = () => {
if (fadeTimeout) clearTimeout(fadeTimeout);
fadeTimeout = setTimeout(() => {
fadeOut();
}, 10);
};
element.addEventListener('mouseenter', onMouseEnter);
element.addEventListener('mouseleave', onMouseLeave);
// Store cleanup function
const cleanup = () => {
element.removeEventListener('mouseenter', onMouseEnter);
element.removeEventListener('mouseleave', onMouseLeave);
if (fadeTimeout) clearTimeout(fadeTimeout);
if (fadeInterval) clearInterval(fadeInterval);
element.classList.remove('void-scrollable-element');
// Remove any remaining show-scrollbar classes
for (let i = 0; i <= 10; i++) {
element.classList.remove(`show-scrollbar-${i}`);
} }
}, 10); };
};
const fadeOut = () => { // Store the cleanup function on the element for later use
if (fadeInterval) clearInterval(fadeInterval); (element as any).__scrollbarCleanup = cleanup;
}
let step = 10;
fadeInterval = setInterval(() => {
if (step >= 0) {
element.classList.remove(`show-scrollbar-${step + 1}`);
element.classList.add(`show-scrollbar-${step}`);
step--;
} else {
clearInterval(fadeInterval!);
}
}, 60);
};
const onMouseEnter = () => {
if (fadeTimeout) clearTimeout(fadeTimeout);
if (fadeInterval) clearInterval(fadeInterval);
fadeIn();
};
const onMouseLeave = () => {
if (fadeTimeout) clearTimeout(fadeTimeout);
fadeTimeout = setTimeout(() => {
fadeOut();
}, 10);
};
element.addEventListener('mouseenter', onMouseEnter);
element.addEventListener('mouseleave', onMouseLeave);
// Store cleanup function
const cleanup = () => {
element.removeEventListener('mouseenter', onMouseEnter);
element.removeEventListener('mouseleave', onMouseLeave);
if (fadeTimeout) clearTimeout(fadeTimeout);
if (fadeInterval) clearInterval(fadeInterval);
element.classList.remove('void-scrollable-element');
// Remove any remaining show-scrollbar classes
for (let i = 0; i <= 10; i++) {
element.classList.remove(`show-scrollbar-${i}`);
}
};
// Store the cleanup function on the element for later use
(element as any).__scrollbarCleanup = cleanup;
}); });
}; };
// Initialize for the first time // Initialize for the first time
initializeScrollbarStyles(); initializeScrollbarStyles();
// Set up mutation observer // Set up mutation observer to do the same
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver(() => {
initializeScrollbarStyles(); initializeScrollbarStyles();
}); });