jrangel/local-content-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to lcp-button

Browse Source
This commit is contained in:
Jeremy Rangel
2024-12-31 18:53:46 -08:00
parent 2df16e37a8
commit 741d39a962
94 changed files with 1159 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
script.js
View File

@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', function () {
// Function to handle the scroll event
function handleScroll() {
console.log ("hey");
const scrolled = window.scrollY || document.documentElement.scrollTop;
// Check if the page has scrolled past the height of the header
@ -110,65 +110,6 @@ 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();