I'm trying to control a video by scrolling so that as the user moves down the page, the video moves with their scrolling. I do this by adding an event handler to the scroll event, which updates the video element's currentTime attribute. When using Safari (11.0.2), the animation is smooth but on Chrome (63) or Firefox, the frame only updates at the end of an inertial scroll. I am able to smooth the animation by lowering the video's horizontal resolution to 600px. Is this simply a product of differing performance or is does my code have some browser-specific optimisation issues?
Note: I tested using a Mac with multitouch smooth scrolling. Not sure if the behaviour is less pronounced with a scroll wheel.
Below is the js used and a link to an example:
var total, video;
window.onload = function() {
video = document.getElementById("video");
// Should react to scrolling until halfway down the video.
total = video.scrollHeight/2 + document.getElementById('top').scrollHeight;
window.addEventListener("scroll", animateGoat, false);
};
function animateGoat(ev) {
var scroll = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0;
// Updates the video to the time with the same fraction of completion as the scroll.
video.currentTime = scroll <= total ? 2 * scroll / total : 2;
}