Auto-Scroll to next anchor on Mouse-wheel movement

Using JavaScript with Hype
21

So simple yet so brilliant.

I admit I did not understand what you mean by working against Hype / the API. Feels a bit like Yoda advising not to work against the Force :smile:

Thank you Hans.

22

everything that manipulates positions or dimensions of elements (e.g. css position fixed) from outside can lead to unexpected results …

1 Like
23

Got it. Thank you!

24

I have add a fullScreen JS to this document but am facing some trouble when the page exits full screen and lands in between 2 scroll positions. Is there a way for Hype to detect that the page has exited full screen and to automatically scroll to the top of the page it was at before exiting the full screen. For e.g,. go to full screen, scroll to Symbol 2 (yellow) and then exit the full screen.

image
image.png2546×1348 152 KB

I found this which may or may not help:

I am attaching the file with the full screen here.

autoScrollToElement-1 - full screen.hype.zip (31.7 KB)

25

Per the documentation, going in and out of fullscreen generates an fullscreenchange event that you can listen for. If the document.fullscreenElement is null at that point, you are exiting. From there and you can perform the scroll you’d like.

I see code in your document that seems to have positional knowledge, so you can use that. For demonstration purposes I just have this code scroll to the top:

document.onfullscreenchange = function ( event ) { 
	if(document.fullscreenElement == null) {
		// scroll to the proper position here
		window.scrollTo(0,0);
	}
}
1 Like
26

Thank you Jonathan! Works perfectly!!!

A few queries related to detecting the last scroll position:

  1. For users that are scrolling manually, vs. using a button, is there a way to keep track of which scroll position the user scrolled to last e.g. “one, two, three”, so that upon exit, we can scroll to that position vs. always to “one”?

  2. The converse of exiting from a fullscreen … if a user has yet to enter full screen, it lands between the two pages (e.g. if you scroll to the second page and then click the Full screen button, it lands up between page 1 and 2.) Any way to get it to scroll to the top of Screen 2 upon entering full screen (since that is where it was scrolled to last)?

  3. Based on where it scrolled to last e.g. “Two”, can I trigger a Custom Behavior such as “Change color Button 2”?

Here is the file I am working on if helpful.

autoScrollToElement-1 - full screen2.hype.zip (33.7 KB)

Thanks in advance for your help!!!

HappyHyper

27

There’s enough code there that it is hard to follow and figure out if there are simple solutions for those problems. The answer is definitely yes to all the above though, as with code anything is possible :slight_smile:. I assume the code is a combination of items in the above posts, so maybe others can contribute towards a solution.

28

Thanks Jonathan!! Agree – with code, anything is possible :slight_smile:

For anyone that may have some ideas, let me paste the code and try to simplify the key question:

How can one build on / modify this code to track whether the user has manually (using finger or mouse etc.) scrolled to position one, two, three or four?

Here is the code:

var yourTargetIds = ['one', 'two', 'three', 'four'];
easing =  'easeOutSine';//easeInOutSine easeOutSine

////noothing to do below ....

window.onload = window.onresize = function(){
var viewportHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);

var docHeight = '' + (yourTargetIds.length * viewportHeight) + 'px';
document.getElementById(hypeDocument.documentId()).style.height = docHeight;
hypeDocument.currentSceneElement().style.height = docHeight;

scrollToPositions = [];
	
for(var i = 0; i < yourTargetIds.length; i++){
var newTopPosition = i * viewportHeight;
hypeDocument.setElementProperty(hypeDocument.getElementById(yourTargetIds[i]), 'top', newTopPosition, 0.3);
scrollToPositions.push(newTopPosition);
}

}

Thank you.

Happy Hyper