kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-04-28 07:26:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Solved scrollbar issues

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-03-18 13:49:35 +01:00
parent 3284684282
commit a8a2efd091
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
2 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/static/css/custom_scrollbar.css
View File

@ -5,29 +5,27 @@
/* Native Scrollbar ausblenden */ /* Native Scrollbar ausblenden */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
.scroll-container::-webkit-scrollbar { .scroll-container::-webkit-scrollbar {
display: none; /* WebKit */ display: none; /* WebKit */
} }
/* Das benutzerdefinierte Scrollbar-Element fixiert am rechten Rand */ #custom-scrollbar {
#custom-scrollbar {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
width: 8px; width: 8px;
height: 100vh; /* height: 100vh; <-- diese Zeile entfernen oder anpassen */
background: transparent; background: transparent;
/* pointer-events NICHT ausschalten, damit die Scrollbar bedienbar bleibt */
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
opacity: 1; /* dauerhaft sichtbar, wenn benötigt */ opacity: 1;
} }
/* Der Thumb der Scrollbar */ /* Der Thumb der Scrollbar */
#scroll-thumb { #scroll-thumb {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 4px;
} }

18
app/static/js/custom_scrollbar.js
View File

@ -1,12 +1,12 @@
function adjustScrollContainerHeight() { function adjustScrollContainerHeight() {
const mainEl = document.getElementById('main'); const mainEl = document.getElementById('main');
const scrollContainer = mainEl.querySelector('.scroll-container'); const scrollContainer = mainEl.querySelector('.scroll-container');
const scrollbarContainer = document.getElementById('custom-scrollbar');
const container = mainEl.parentElement; const container = mainEl.parentElement;
const scrollbarContainer = mainEl.parentElement.querySelector('#custom-scrollbar');
let siblingsHeight = 0;
let siblingsHeight = 0;
Array.from(container.children).forEach(child => { Array.from(container.children).forEach(child => {
if(child !== mainEl && child !== scrollContainer && child !== scrollbarContainer) { if(child !== mainEl && child !== scrollbarContainer) {
const style = window.getComputedStyle(child); const style = window.getComputedStyle(child);
const height = child.offsetHeight; const height = child.offsetHeight;
const marginTop = parseFloat(style.marginTop) || 0; const marginTop = parseFloat(style.marginTop) || 0;
@ -15,15 +15,21 @@ function adjustScrollContainerHeight() {
} }
}); });
// Verfügbare Höhe berechnen: Fensterhöhe minus Höhe der Geschwister // Berechne die verfügbare Höhe für den Scrollbereich
const availableHeight = window.innerHeight - siblingsHeight; const availableHeight = window.innerHeight - siblingsHeight;
// Setze die max-Höhe für den Scroll-Container
scrollContainer.style.maxHeight = availableHeight + 'px'; scrollContainer.style.maxHeight = availableHeight + 'px';
scrollContainer.style.overflowY = 'auto'; scrollContainer.style.overflowY = 'auto';
scrollContainer.style.overflowX = 'hidden'; scrollContainer.style.overflowX = 'hidden';
// Hole die aktuelle Position und Höhe des Scrollbereichs
const scrollContainerRect = scrollContainer.getBoundingClientRect();
// Setze die Position (top) und die Höhe des benutzerdefinierten Scrollbar-Tracks
scrollbarContainer.style.top = scrollContainerRect.top + 'px';
scrollbarContainer.style.height = scrollContainerRect.height + 'px';
} }
window.addEventListener('load', adjustScrollContainerHeight); window.addEventListener('load', adjustScrollContainerHeight);
window.addEventListener('resize', adjustScrollContainerHeight); window.addEventListener('resize', adjustScrollContainerHeight);