Scroll in group with content overflow

Using JavaScript with Hype
1

I have a image inside a symbol with a width 3 times bigger then the viewport. I placed this image in a group and set the content overflow to have scrollbars, so the user can scroll the image left and right.

As the Image has two hotspots that are placed in a distance to each other that is bigger than the viewport, I would like to have a JS (or something) that I can trigger, so that the symbol show one time the one or the other hotspot.

I have found a way to set the initial scrolling on symbol load …

	initialscroll = hypeDocument.getElementById('scrollGroup');
initialscroll.scrollLeft = 650; // image moved left 650 pixels

But how can I show/load the same symbol once with scrollposition 1 and on the other hand wit position 2?

Please find attached a not working example.

Thanks.

scrolltest.hype.zip (69.7 KB)

2

A couple of notes first:

  • Unfortunately Hype’s built-in viewport actions do not presently work for items with content overflow scrolling. So you’ll need a custom solution.
  • Some of your code calls hypeDocument.getSymbolInstanceById('HotSpotImage').element('scrollGroup');. This isn’t quite what you want - .element() takes no arguments and returns the element for the symbol instance. Generally you’d pair this with something like .getElementsByClassName() to find elements within the symbol you are looking for. In your document’s case, you’ve simply assigned a unique element ID to “scrollGroup”, so you can for now just use hypeDocument.getElementById("scrollGroup") to find it (as you do above). But if you intend to have multiple symbol instances you’ll want to use the class name method instead.
  • note that your red box is “h1” but this can be a bit confusing vs. the HTML tag of the same name!

Okay, now that is out of the way…

My recommendation would probably be to add an onscroll handler for the scrollGroup, and then do your own calculation to determine when the other item is within view.

Code specific to this case would look something like:

	scrollto.onscroll = (function () {
		var redBox = hypeDocument.getElementById("h1");
		var left = parseFloat(hypeDocument.getElementProperty(redBox, "left"));
		var width = parseFloat(hypeDocument.getElementProperty(redBox, "width"));
		if(scrollto.scrollLeft < (left + width)) {
			console.log("showing up...");
			// do somehting here
		}
	});
1 Like