Horizontal Scrolling with Vertical Mouse Scrolling

Axure RP 8
1

Hi, I’m doing an university project and this is my first time using Axure.
The website will be a digital portfolio of my work, but i wanted to make it a bit different.
I wanted to make it so that it scrolls horizontally rather than vertically. And i want this to happen with the normal scroll wheel on the mouse. I cant find a solution online, so I’m reaching out to the community.
Thanks in advance,
Djordje

2

I don’t think axure can do this. There would need to be a OnMouseScroll event to be able to set it to horizontal.

3

Hi,
There is a “hack” ;]

The way i do it:

  • I put some transparent stuff on the page so it has some significant height - for example 4444px
  • i place the actual content of the page that needs to be scrollable horizontally in the dynamic panel called “content”
  • i place this dynamic panel in another panel called “content"Wrapper”
  • i fix the position of “contentWrapper” to to left
  • i set the width of “contentWrapper” to 100% (the one under right click options)
  • i set the alignment of the page to left
  • I add onWindowsScroll Interaction to the page
  • It should trigger move action on “content” panel
  • Y value set to “” (nothing)
  • X vale set to function [[Math.max(Window.width-2222, -2222*Window.scrollY/(4444-Window.height))]] where 2222 is the value of the “content” panel width and 4444 is the height of the page
  • Instead of 2222 you can use width value of the “content” panel

Check this out horizontalScroll.rp (66.0 KB)

Cheers!

1 Like
4

Thank you so much, this is amazing.
I gave up on the design, but now i have to come back to it.
It works perfectly!!!
Thank you again, absolute legend!

6

Well, seems that i ran into a problem. For some reason my website is scrolling diagonally now.
Ill attach my file here so you can check what i did wrong.
Thank you in advance,
Djordje
website.rp (125.2 KB)

7

@Sarma1 The “Content Wrapper” dynamic panel needs to have the “Pin to Browser” selected and set to left. You can get there by right-clicking on the DP and selecting “Pin to Browser”. Then your file should work.

image

website.rp (123.4 KB)

@axureguru, this is a really cool concept.

1 Like
8

Damn…
This forum works fast ;]

9

Thank you guys very much. I’m getting an A because of this forum :wink:

10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.