I want give Timeline this refer Scrollbars of Group name CGI. By that not about Scrollbars main of Browser

Using JavaScript with Hype
15

@book.ratthanan

This is a very basic demo: Sc_JHSv1.hype.zip (46.0 KB)

The “File” group now has scrollbars, and scrolling this group animates the “Bar” element to slide down.

This “File” group now has a class name of “noHorizScrollBar” which is used in a bit of CSS inserted into the “Head HTML” to get rid of the horizontal scrollbar that otherwise would appear on the “File” group:

.noHorizScrollBar {overflow-x: hidden !important;}

I’ve moved the (nav?) “Bar” outside of the “File” group so it does not need to be sticky - nor could I get it to be sticky inside the “File” group (which is why I moved it outside :wink: ).

I found the below “scrollTop” code created just for us by @MarkHunte in this post.

@MarkHunte’s adapted code is used in the function “animateMenu” replacing “scrollto()”:

/* we don't need these any more
	var navbar = hypeDocument.getElementById('navbar2');
	navbar.style.position = "fixed"; 
	*/
	
	var file = hypeDocument.getElementById('fileHolder');
	
	file.addEventListener('scroll', function (e) {
		hypeDocument.goToTimeInTimelineNamed(file.scrollTop * 0.004, 'animateBar')
		//console.log(file.scrollTop);
	});
3 Likes