|
|
const scrollThrottleCallback = (callback, timeout) => {
|
|
|
let wait = false;
|
|
|
return () => {
|
|
|
if (wait) return;
|
|
|
callback.call();
|
|
|
wait = true;
|
|
|
setTimeout(() => { wait = false; }, timeout);
|
|
|
};
|
|
|
};
|
|
|
|
|
|
|
|
|
function getAbsolutePosition(element) {
|
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
|
|
return {
|
|
|
top: rect.top + window.scrollY, // Add vertical scroll
|
|
|
left: rect.left + window.scrollX, // Add horizontal scroll
|
|
|
bottom: rect.bottom + window.scrollY,
|
|
|
right: rect.right + window.scrollX
|
|
|
};
|
|
|
}
|
|
|
function getPositionRelativeToParent(element) {
|
|
|
const parent = element.parentElement;
|
|
|
const parentRect = parent.getBoundingClientRect();
|
|
|
const elementRect = element.getBoundingClientRect();
|
|
|
|
|
|
return {
|
|
|
top: elementRect.top - parentRect.top,
|
|
|
left: elementRect.left - parentRect.left,
|
|
|
bottom: elementRect.bottom - parentRect.top,
|
|
|
right: elementRect.right - parentRect.left
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function smoothScrollToElement(element, offset = 0) {
|
|
|
const elementPosition = getAbsolutePosition(element);
|
|
|
const targetScroll = elementPosition.top - offset;
|
|
|
|
|
|
// Smooth scroll with animation
|
|
|
window.scrollTo({
|
|
|
top: targetScroll,
|
|
|
behavior: 'smooth'
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Enhanced version with progress callback
|
|
|
function scrollToElementWithProgress(element, offset = 0, onProgress) {
|
|
|
const start = window.scrollY;
|
|
|
const elementPosition = getAbsolutePosition(element);
|
|
|
const target = elementPosition.top - offset;
|
|
|
const distance = target - start;
|
|
|
const duration = 1000; // ms
|
|
|
const startTime = performance.now();
|
|
|
|
|
|
function animate(currentTime) {
|
|
|
const elapsed = currentTime - startTime;
|
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
|
|
// Easing function for smooth animation
|
|
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
|
|
|
|
|
const currentPosition = start + (distance * easeProgress);
|
|
|
window.scrollTo(0, currentPosition);
|
|
|
|
|
|
if (onProgress) {
|
|
|
onProgress(progress);
|
|
|
}
|
|
|
|
|
|
if (progress < 1) {
|
|
|
requestAnimationFrame(animate);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
requestAnimationFrame(animate);
|
|
|
}
|
|
|
|
|
|
function scrollToElement(elementSelector) {
|
|
|
const element = document.querySelector(elementSelector);
|
|
|
if (element) {
|
|
|
const methode=1;
|
|
|
switch (methode) {
|
|
|
case 1 :
|
|
|
element.scrollIntoView();
|
|
|
break;
|
|
|
case 2 :
|
|
|
smoothScrollToElement(element);
|
|
|
break;
|
|
|
case 3 :
|
|
|
scrollToElementWithProgress(element, 0, (progress) => {
|
|
|
logMsg('htmlElement',`Scroll progress: ${Math.round(progress * 100)}%`);
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
logMsg('htmlElement','scrollTo '+elementSelector);
|
|
|
}
|
|
|
|
|
|
function getAbsolutePosition(element) {
|
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
|
|
return {
|
|
|
top: rect.top + window.scrollY, // Add vertical scroll
|
|
|
left: rect.left + window.scrollX, // Add horizontal scroll
|
|
|
bottom: rect.bottom + window.scrollY,
|
|
|
right: rect.right + window.scrollX
|
|
|
};
|
|
|
}
|
|
|
function getPositionRelativeToParent(element) {
|
|
|
const parent = element.parentElement;
|
|
|
const parentRect = parent.getBoundingClientRect();
|
|
|
const elementRect = element.getBoundingClientRect();
|
|
|
|
|
|
return {
|
|
|
top: elementRect.top - parentRect.top,
|
|
|
left: elementRect.left - parentRect.left,
|
|
|
bottom: elementRect.bottom - parentRect.top,
|
|
|
right: elementRect.right - parentRect.left
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function smoothScrollToElement(element, offset = 0) {
|
|
|
const elementPosition = getAbsolutePosition(element);
|
|
|
const targetScroll = elementPosition.top - offset;
|
|
|
|
|
|
// Smooth scroll with animation
|
|
|
window.scrollTo({
|
|
|
top: targetScroll,
|
|
|
behavior: 'smooth'
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Enhanced version with progress callback
|
|
|
function scrollToElementWithProgress(element, offset = 0, onProgress) {
|
|
|
const start = window.scrollY;
|
|
|
const elementPosition = getAbsolutePosition(element);
|
|
|
const target = elementPosition.top - offset;
|
|
|
const distance = target - start;
|
|
|
const duration = 1000; // ms
|
|
|
const startTime = performance.now();
|
|
|
|
|
|
function animate(currentTime) {
|
|
|
const elapsed = currentTime - startTime;
|
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
|
|
// Easing function for smooth animation
|
|
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
|
|
|
|
|
const currentPosition = start + (distance * easeProgress);
|
|
|
window.scrollTo(0, currentPosition);
|
|
|
|
|
|
if (onProgress) {
|
|
|
onProgress(progress);
|
|
|
}
|
|
|
|
|
|
if (progress < 1) {
|
|
|
requestAnimationFrame(animate);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
requestAnimationFrame(animate);
|
|
|
}
|
|
|
|
|
|
function scrollToElement(elementSelector) {
|
|
|
const element = document.querySelector(elementSelector);
|
|
|
if (element) {
|
|
|
const methode=1;
|
|
|
switch (methode) {
|
|
|
case 1 :
|
|
|
element.scrollIntoView();
|
|
|
break;
|
|
|
case 2 :
|
|
|
smoothScrollToElement(element);
|
|
|
break;
|
|
|
case 3 :
|
|
|
scrollToElementWithProgress(element, 0, (progress) => {
|
|
|
logMsg('htmlElement',`Scroll progress: ${Math.round(progress * 100)}%`);
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
logMsg('htmlElement','scrollTo '+elementSelector);
|
|
|
}
|