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

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

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

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

@ -1,12 +1,12 @@
function adjustScrollContainerHeight() {
const mainEl = document.getElementById('main');
const scrollContainer = mainEl.querySelector('.scroll-container');
const scrollbarContainer = document.getElementById('custom-scrollbar');
const container = mainEl.parentElement;
const scrollbarContainer = mainEl.parentElement.querySelector('#custom-scrollbar');
let siblingsHeight = 0;
let siblingsHeight = 0;
Array.from(container.children).forEach(child => {
if(child !== mainEl && child !== scrollContainer && child !== scrollbarContainer) {
if(child !== mainEl && child !== scrollbarContainer) {
const style = window.getComputedStyle(child);
const height = child.offsetHeight;
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;
// Setze die max-Höhe für den Scroll-Container
scrollContainer.style.maxHeight = availableHeight + 'px';
scrollContainer.style.overflowY = 'auto';
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('resize', adjustScrollContainerHeight);