110 lines
4.0 KiB
JavaScript
110 lines
4.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// Get references to the DOM elements
|
|
const header = document.getElementById('lcp-header-container');
|
|
const sideContent = document.getElementById('lcp-sidecontent');
|
|
|
|
// Ensure elements exist before proceeding
|
|
if (!header || !sideContent) return;
|
|
|
|
// Measure the height of the header once the DOM is loaded
|
|
const headerHeight = header.offsetHeight;
|
|
|
|
// Set the height of #lcp-sidecontent to 100vh minus the header height
|
|
sideContent.style.height = `calc(100vh - ${headerHeight}px)`;
|
|
|
|
// Function to handle the scroll event
|
|
function handleScroll() {
|
|
const scrolled = window.scrollY || document.documentElement.scrollTop;
|
|
|
|
// Check if the page has scrolled past the height of the header
|
|
if (scrolled >= headerHeight) {
|
|
// Add the 'lcp-fixed' class and set 'top' to 0
|
|
sideContent.classList.add('lcp-fixed');
|
|
sideContent.style.top = '0';
|
|
} else {
|
|
// Remove the 'lcp-fixed' class if scrolled back above the header
|
|
sideContent.classList.remove('lcp-fixed');
|
|
sideContent.style.top = ''; // Reset the 'top' style
|
|
}
|
|
}
|
|
|
|
// Add the scroll event listener
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
// Also trigger the scroll handler once on load in case the page is already scrolled
|
|
handleScroll();
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const sidecontent = document.getElementById("lcp-sidecontent");
|
|
const innerContent = document.getElementById("lcp-sidecontent-inner");
|
|
const scrollTrack = document.getElementById("lcp-scroll-track");
|
|
const scrollBar = document.getElementById("lcp-scroll-bar");
|
|
|
|
let isDragging = false;
|
|
let startY = 0;
|
|
let startScrollTop = 0;
|
|
|
|
// Update the custom scrollbar position based on the content's scroll position
|
|
function updateCustomScrollbar() {
|
|
const contentHeight = innerContent.scrollHeight;
|
|
const visibleHeight = innerContent.clientHeight;
|
|
const scrollTrackHeight = scrollTrack.clientHeight;
|
|
|
|
// Calculate the proportion of visible content to total content
|
|
const thumbHeight = (visibleHeight / contentHeight) * scrollTrackHeight;
|
|
scrollBar.style.height = `${thumbHeight}px`;
|
|
|
|
// Calculate the scroll ratio (position of the content relative to its height)
|
|
const scrollRatio = innerContent.scrollTop / (contentHeight - visibleHeight);
|
|
|
|
// Position the scrollbar thumb based on the scroll ratio
|
|
scrollBar.style.top = `${scrollRatio * (scrollTrackHeight - thumbHeight)}px`;
|
|
}
|
|
|
|
// Handle the mouse down event to begin dragging the scrollbar
|
|
scrollBar.addEventListener("mousedown", (e) => {
|
|
isDragging = true;
|
|
startY = e.clientY;
|
|
startScrollTop = innerContent.scrollTop;
|
|
document.body.style.userSelect = "none"; // Disable text selection while dragging
|
|
});
|
|
|
|
// Handle mouse movement to drag the scrollbar and simulate scrolling
|
|
document.addEventListener("mousemove", (e) => {
|
|
if (!isDragging) return;
|
|
|
|
const deltaY = e.clientY - startY;
|
|
const contentHeight = innerContent.scrollHeight;
|
|
const visibleHeight = innerContent.clientHeight;
|
|
const scrollTrackHeight = scrollTrack.clientHeight;
|
|
|
|
const thumbHeight = scrollBar.clientHeight;
|
|
const scrollableDistance = contentHeight - visibleHeight;
|
|
const thumbDistance = scrollTrackHeight - thumbHeight;
|
|
|
|
// Calculate new scroll position for content based on dragging
|
|
const newScrollTop = (deltaY / thumbDistance) * scrollableDistance + startScrollTop;
|
|
innerContent.scrollTop = newScrollTop;
|
|
updateCustomScrollbar();
|
|
});
|
|
|
|
// Handle mouse up event to stop dragging
|
|
document.addEventListener("mouseup", () => {
|
|
isDragging = false;
|
|
document.body.style.userSelect = ""; // Enable text selection again
|
|
});
|
|
|
|
// Handle scroll events on the content to update the custom scrollbar
|
|
innerContent.addEventListener("scroll", updateCustomScrollbar);
|
|
|
|
// Initialize the custom scrollbar position when the page loads
|
|
updateCustomScrollbar();
|