Using the scroll position with content overflow scrollbars

Using JavaScript with Hype
1

Hello! I have to questions: First, I have an existing script that plays a video automatically when you're at a specific scrolling position. The problem I have is that I need to use the scrollbars option of content overflow. How can I return the scrolling position within the mask to use the existing script?

Here's a part of the script I'm using that should be enough to understand how it works at the moment (unfortunately I can't post more of the project here):

warten = hypeDocument.getElementById("wartenAnimation");
window.onscroll = function(){


// Warten


if(scrollY >= 529 && scrollY <= 1156){
	hypeDocument.getElementById("wartenBlur").style.opacity = "0%";
	warten.play();		

}else{
	warten.pause();
	hypeDocument.getElementById("wartenBlur").style.opacity = "100%";

}

And second, I have multiple carousels that get undraggable (inside the mask) as soon as I mask the content. How can I solve that?

Thanks!

Edit: Solved the carousel problem :slight_smile:

2

The technique is basically the same, but instead of adding the onscroll to the window you would add it to your group element with the scrollbars/auto overflow. Then you can query the element's scrollTop property. It would look something like:

	var warten = hypeDocument.getElementById("wartenAnimation");
	var scrollGroupElement = hypeDocument.getElementById("myscrollgroup");
	
	scrollGroupElement.onscroll = (function () {
		if(scrollGroupElement.scrollTop >= 529 && scrollGroupElement.scrollTop <= 1156){
			hypeDocument.getElementById("wartenBlur").style.opacity = "0%";
			warten.play();		
		} else {
			warten.pause();
			hypeDocument.getElementById("wartenBlur").style.opacity = "100%";
		}
	});
1 Like
4

Thank you very much!

1 Like