Scroll a frame from mouse pointer outside it

Hello.

Is there a possible way to scroll a frame in the center of the page keeping the mouse pointer outside the frame’s area? (Please see the attached example document).

I don’t really want my whole page to scroll, only the frame in between. But, it might be inconvenient for the user to keep moving the mouse over the frame. So, I’d like the frame to scrol when the mouse wheel moves (and if possible, I’d like to emulate the same behaviour in touch, i.e. when the user touuches outside the frame to scroll, the frame should scroll).

Excuse me I couldn’t explain it well.

Here’s the document (it has nothing except for an example position of the frame): Question.hype.zip (33.8 KB)

Standard disclaimer: it is generally not a good idea to hijack standard user interfaces, so make sure you have a strong reason for this! :slight_smile:.

I haven’t written code to do so (and there’s no built-in features of Hype to do this), but it should be possible to capture mouse wheel events and either use their data to control the scrollTop attribute of another element or directly forward the event. Searching for “forward mouse wheel event javascript” or “redirect mouse wheel event” yields some results like this library or this jquery-based stack overflow answer.

As a simple approach why not add a high amount of padding to the top, left and right sides? The bottom does not “work” because it simple exposes more of the text.

In your example I used 100px for the top & 250px for both the left & right sides of the textbox… almost the width of the page (you could make it the full width or add more to the top of course).

The text is still in the same format (line width) as before but the user can now “wheel” to scroll in a larger area on the page (top, left, right). This set-up also works with mobile touch events.

In these tests whether “wheeling” (desktop) or dragging (mobile) I had no problem scrolling the text box - it was easy to keep within the “Frame”.

Below is a screen shot of the text box with padding added (100 top, 250 each side) - colored background here for ease of viewing the padding.

2 Likes

Totally didn’t think that it would be this simple. Thanks a lot.

Edit: The only problem with this is that the scrollbars are visible more than the text area (like above ane below it) and say the text ends, but, because of the padding, the scroll bars go out of it and kinds looks a bit weird, but, it’s still doable.

You can create your own scrollbar(s). Put the text on a timeline, begin= top-text, end= bottom-text, then create a scrubber and give it a ‘on drag’ (timeline) action from the actions panel.
Define where the scrubber must stop and end and put that on a timeline as well.

1 Like

You could do this another way keeping the scrollbar tight in relationship to the text, but it is a lot more coding as You would need to have another (invisible) element that measured the drag distance and scrolled the text field accordingly. Another alternative would be to have a button that while pressed on would slowly scroll the text field (relatively easy to do).

2 Likes

@Rick4F @JimScott, these are some great ideas. Thanks for the inputs.

@jonathan The RetargetMouseScroll javascript library is amazing. It’s pretty easy too.

2 Likes