Creating horizontal scrolling in a certain area and then scroll normally

advanced-prototyping
newbie-question
#1

Hi there! Is it possible to make something like this http://side-scrolling-in-ix2.webflow.io/ (please, scroll the page and when you get to the part with a picture gallery it will scroll to the right and when you get to the last picture in this area you will be able to scroll down the rest part of the webpage)

#2

Here is a shot at this. It works for the most part, at least in latest Google Chrome on Win10. If you scroll very fast, or maybe too erratically, or have scroll acceleration set for your mouse wheel, etc. it may break. If you resize the window the page will need to be reloaded. Perhaps this approach can be improved with better conditional logic, especially for the transition of vertical to horizontal scrolling, but it took me longer than I expected just to get this to work at all. The basic approach is to use some sleight of hand with a pinned dynamic panel, and translate the Window Scrolled events into moving the carousel of images left and right.

  • The image carousel (horizontal list of photos) is a dynamic panel (abbreviated as dp) nested in another dp–the mask for the list–and named “carousel dp”.
  • The “carousel dp” is duplicated and named “pinned carousel dp”. Then all the content above this carousel is also duplicated and placed inside “pinned carousel dp”. Then this dp is pinned to the bottom of the browser window, to prevent it from moving when the page is scrolled. Then this dp is hidden by default.
  • All the content below the image carousel is converted to a dynamic panel, named “bottom dp”. Then a blank state is added and moved to the top, such that the default view of this dp is empty (effectively hiding it. In retrospect I think I could have just grouped or dp’d everything below the carousel and then hide/show it as needed.)
  • A hotspot, “scroll bottom” is added and placed well below the actual content, giving enough “scroll space” to horizontally scroll the entire image list. In this example, I placed it at y=5000.
  • When the window is scrolled down far enough such that the “carousel dp” is right at the bottom of the window, the “real content” is hidden and the pinned dp is shown. This, along with the “scroll bottom” hotspot allows the page to scroll (necessary to trigger the Window Scrolled events) but the (duplicated) content won’t move up/down with the scroll because it is in a pinned dp.
  • When the “pinned carousel dp” is visible and the page is scrolled down, the “pinned image list” is moved left by 10 px, for a visual effect of horizontally scrolling it. Likewise, when it is visible and the page is scrolled up, the “pinned image list” is moved to the right by 10 px.
  • The Moved event of “pinned image list” moves the “real” list along with it. It also tests the position of the list such that when it is moved all the way to the right, it hides the pinned dp, shows the “real” content and sets the “bottom dp” to State2 to show it.
  • When the “pinned carousel dp” is shown it shows the “scroll” bottom" hotspot–again, to provide enough scroll space to move the image list back and forth. When it is hidden, it hides this hotspot so the page can stop at the “real bottom” (footer) when the page is scrolled.

scroll vertical then horizontal.rp (402.3 KB)