diff --git a/src/ScrollyVideo.js b/src/ScrollyVideo.js index 2bdba24..cea0b7f 100644 --- a/src/ScrollyVideo.js +++ b/src/ScrollyVideo.js @@ -469,6 +469,30 @@ class ScrollyVideo { this.transitionToTargetTime(options); } + /** + * Simulate trackScroll programmatically (scrolls on page by percentage of video) + * + * @param percentage + */ + setScrollPercent(percentage) { + if (!this.trackScroll) { + console.warn('`setScrollPercent` requires enabled `trackScroll`'); + return; + } + + const parent = this.container.parentNode; + const { top, height } = parent.getBoundingClientRect(); + + // eslint-disable-next-line no-undef + const startPoint = top + window.pageYOffset; + // eslint-disable-next-line no-undef + const containerHeightInViewport = height - window.innerHeight; + const targetPoint = startPoint + containerHeightInViewport * percentage; + + // eslint-disable-next-line no-undef + window.scrollTo({ top: targetPoint }); + } + /** * Call to destroy this ScrollyVideo object */ diff --git a/src/ScrollyVideo.jsx b/src/ScrollyVideo.jsx index 73851c5..91a8414 100644 --- a/src/ScrollyVideo.jsx +++ b/src/ScrollyVideo.jsx @@ -1,9 +1,9 @@ import React, { forwardRef, useEffect, - useImperativeHandle, - useRef, useState, + useRef, + useImperativeHandle, } from 'react'; import ScrollyVideo from './ScrollyVideo'; @@ -75,9 +75,13 @@ const ScrollyVideoComponent = forwardRef(function ScrollyVideoComponent( videoPercentage >= 0 && videoPercentage <= 1 ) { - scrollyVideoRef.current.setTargetTimePercent(videoPercentage); + if (trackScroll) { + scrollyVideoRef.current.setScrollPercent(videoPercentage) + } else { + scrollyVideoRef.current.setTargetTimePercent(videoPercentage); + } } - }, [videoPercentage]); + }, [videoPercentage, trackScroll]); // effect for unmount useEffect( @@ -95,6 +99,9 @@ const ScrollyVideoComponent = forwardRef(function ScrollyVideoComponent( setTargetTimePercent: scrollyVideoRef.current ? scrollyVideoRef.current.setTargetTimePercent.bind(instance) : () => {}, + setScrollPercent: scrollyVideoRef.current + ? scrollyVideoRef.current.setScrollPercent.bind(instance) + : () => {}, }), [instance], ); diff --git a/src/ScrollyVideo.svelte b/src/ScrollyVideo.svelte index 4241961..bd60ae7 100644 --- a/src/ScrollyVideo.svelte +++ b/src/ScrollyVideo.svelte @@ -26,8 +26,17 @@ } // If we need to update the target time percent - if (scrollyVideo && typeof videoPercentage === 'number' && videoPercentage >= 0 && videoPercentage <= 1) { - scrollyVideo.setTargetTimePercent(videoPercentage); + if ( + scrollyVideo && + typeof videoPercentage === 'number' && + videoPercentage >= 0 && + videoPercentage <= 1 + ) { + if (restProps.trackScroll) { + scrollyVideo.setScrollPercent(videoPercentage); + } else { + scrollyVideo.setTargetTimePercent(videoPercentage); + } } } } diff --git a/src/ScrollyVideo.vue b/src/ScrollyVideo.vue index 0693212..29348f5 100644 --- a/src/ScrollyVideo.vue +++ b/src/ScrollyVideo.vue @@ -44,7 +44,11 @@ export default { videoPercentage >= 0 && videoPercentage <= 1 ) { - this.scrollyVideo.setTargetTimePercent(videoPercentage); + if (restProps.trackScroll) { + this.scrollyVideo.setScrollPercent(videoPercentage); + } else { + this.scrollyVideo.setTargetTimePercent(videoPercentage); + } } }, deep: true,