"Locking" scrubber
/**
* Custom Scripts - Loaded in theme settings, advanced
*/
document.addEventListener('DOMContentLoaded', function() {
const section = document.querySelector("section.vid");
let headerElement = document.querySelector(".section-header");
const videoHolder = document.querySelector("section.vid div.holder");
const vid = document.querySelector("section.vid video");
let videoHolderHeightSet = false;
let videoHolderTopSet = false;
vid.pause();
let lastSetTime = 0;
const scroll = () => {
const sectionRect = section.getBoundingClientRect();
if (sectionRect.bottom < 0 || sectionRect.top > window.innerHeight) {
return;
}
headerElement = document.querySelector(".section-header");
if (!videoHolderHeightSet) {
videoHolder.style.height = `${window.innerHeight - headerElement.offsetHeight}px`;
videoHolderHeightSet = true;
}
if (!videoHolderTopSet) {
videoHolder.style.top = `${headerElement.offsetHeight}px`;
videoHolderTopSet = true;
}
const distance = window.scrollY - (section.offsetTop - headerElement.offsetHeight);
const total = section.clientHeight - window.innerHeight;
let percentage = distance / total;
percentage = Math.max(0, Math.min(percentage, 1));
if (vid.duration > 0) {
const newTime = vid.duration * percentage;
if (Math.abs(newTime - lastSetTime) > 0.03) {
vid.currentTime = newTime;
lastSetTime = newTime;
}
}
};
scroll();
window.addEventListener("scroll", scroll);
});