Without seeing your set-up I am going to need to make some guesses; perhaps You have already done some of the steps described below.
In the following demo I have set the scene size to the iPad Horizontal preset (1024 x 768). The image used in this demo is 2145px x 1424px. Hype Project: ScrollBars_iPad.hype.zip (1.1 MB) - Demo here. Designed to be displayed on an iPad - but desktop browsers will work of course.
1) Place the desired image in a group.
Simply select the image and choose “Group” from Hype’s “Arrange” menu (or “opt-cmd-G”). You now have a folder icon in the Timeline layers panel that will simply say “Group” & inside that “Group” folder is your image. In essence what we have done is to wrap the image in a “div” tag.
**2) Next select the "Group" folder** (which You can rename) and in the "Metrics" panel choose "Scrollbars" under the "Content Overflow" heading. This "Group" is now masking the larger image.
**3) This is very important** - If You wish to be able to scroll the entire image You must make sure the upper left corner of the image is in the upper left corner of the "Group" that contains it. The image will not scroll up or to the left of the container's boundaries in a desktop browser, iOS device, etc. - even if the image extends further in those directions (hidden by the "Group" masking). The image will only scroll right & down from its placement in the "Group" container.
Below shows the setup position to make sure all of the image can be scrolled to. The yellow dotted lines indicated the “Group” that encloses the image. The “Group” is set to the “iPad Landscape” Scene size. The grey area with the dots shows where the image is (off-Scene).
4) The final step of setting the scroll of the image is optional, but almost always You will probably want to frame your image in the Scene window at a particular location. So we dip into a little coding, and the place to put this code is in the “On Scene Load” handler in the “Scene” panel.
The “On Scene Load” handler is running the “untitledFunction()” which contains the following code:
initialscroll = hypeDocument.getElementById('scrollGroup');
initialscroll.scrollTop = 400; // image moved up 400 pixels
initialscroll.scrollLeft = 650; // image moved left 650 pixels
I gave the “Group” that contains the image an “id” of “scrollGroup”. It is this “Group” of course that has the scroll bars property. In the code above the image is scrolled up 400 pixels, and scrolled left 650 pixels. The numbers can be set to whatever is needed to place the part of the image You wish to be visible within the “Group” container’s boundaries.