kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-09-10 03:37:11 +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
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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);