Use mouse wheel to scroll down and navigate Swiper gallery.
- This is a rough proof of concept
- Not set up to be fully responsive
- There are intermittent glitches
- Use at own risk
- Zero support is offered for any fixes or updates
- The community is welcome to hack on this and try to improve it
Swipe to unlock pining
When the gallery gets pinned be sure to Swipe until the last slide is visible
Now you can scroll down to the rest of the page. Neat!
Known Issues
- If you get to slide 6 and scroll all the way down, sometimes on the way up you can bypass the pinning and navigation through the Swiper gallery.
- Sometimes when going back up the page the pinned Swiper section glitches out. Elements flash and jump a bit. I have no idea what's going on here but I suspect the scroll position is jumping up and down.
- Attempting to use the Scrollbar while scrolling is disabled results in lots jitters and flasing.
- After page loads fresh, grab scrollbar and try to scroll down the full page. It becomes a mess when you hit the section that is trying to disable scrolling.
Closing Thoughts
Even though this seems like a neat UI treatment, it is very strange to lock the scrollbar in place. I really don't think the user should be prevented from using a scrollbar. I tried hiding the scrollbar by setting visibility:hidden on body when scrolling should be disabled but that was weird too.
I would suggest the following 3 alternatives
- Do not pin the Swiper section. Provide a clear UI for horizontal navigation with prev/next buttons and make it clear that swiping is allowed too.
- Ditch Swiper. Pin the section and control it with a container animation. Using this technique the scroll-wheel and scrollbar can be used consistently with no lockups or funny business.
- Create a full-screen experience where the scrollbar is always hidden and the only way to navigate is via scrollwheel or touch gestures.
