-
Notifications
You must be signed in to change notification settings - Fork 143
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vertical scroll #11
Comments
But it's just amazing on phones! |
Yeah, this is something we talked about a little in another thread. Copying my comments there:
That all said, it's worth noting that folks without horizontal scroll are a tiny minority of my traffic. Around 75% of my traffic is from mobile devices. Around 10% is mac desktops (which all have horizontally scrolling mice/trackpads) and around 10% comes from windows desktops (almost all of which have horizontal scroll, though probably not many people know how to use it). I would guess somewhere between 1% and 6% of my traffic comes from people who either physically can't horizontally scroll or don't know how. I want to support this use case, but the solution shouldn't diminish the experience for the majority of users. I'm open to suggestions how that can be done. |
Thanks for the very thoughtful, and data driven, response |
Thinking about this a bit more, I think I like the solution in which we show a subset of users the "hold shift to scroll" message. It avoids scrolljacking, maximizes performance, and actually gives the user a little skill they didn't have before coming to the site. For users on touch devices or trackpads, nothing would change. The key question is: how do we appropriately target just the mousewheel people, without showing an irrelevant, confusing message to non-mousewheel people. The solution should exclude all mobile/touch devices (easy) exclude all macs (easy) and include Windows/Linux devices unless the user is using a track pad (mega-hard, bordering on impossible). There's no way we could perfectly segment the two groups, but could we get close enough? A couple of ideas:
Now, having written all that out, I'm not sure if any of those methods would be reliable enough to be worth implementing. Maybe I should take another look at the approach where we translate vertical scroll events to horizontal scroll—I just feel that's gonna break on some devices, and it will be really hard to test cross-platform. Ack, maybe there's no solution after all. |
Ok, tried my hand at fixing the problems noted in #11, on the branch It is possible to break out of the trapped mouse situation by A) moving the mouse outside the vertically scrollable element or B) using native browser horizontal scroll (keyboard arrows or trackpad swipe right). But I feel like that's a way more surprising, unintuitive experience that just demanding that the user horizontally scroll in the first place. Also, if you move your mouse to the left of the scrollable element, you'll just get trapped again. If a use didn't know about omnidirectional scroll I think there's a slim chance they'll be able to figure out how to escape the mouse trap. So, yeah, I think the idea of using vertical scroll wheel to produce horizontal scroll with JS is pretty much dead. We can maybe still find a solution that gives the user better instructions though. |
I started working on a vertical version by abusing css transforms but gave up. If anyone wants to pick it up it's here https://github.com/ChildishGiant/1-pixel-wealth/tree/vertical |
Why not just have the message appear whenever a user attempts to scroll vertically? It can then disappear again when the user starts scrolling horizontally. |
You could modify your If If I think this is fairly intuitive. |
Anecdotally, I use a Mac and an external (not Magic) mouse, so I would fall into the camp of "Mac but not Trackpad". Definitely understand this is a small use-case for this site. Either way "exclude all macs" might not be the ideal solution, if avoidable. |
FIxed in d979df2. The solution I went with is (on desktop devices only) if the user attempts to scroll down or moves their mouse, I start a timer. If the user still hasn't figured out how to scroll right once the timer elapses, I display the text "To scroll right, use shift + mousewheel. If you have a touchpad, swipe sideways." The timer is 2 seconds for a downward scroll and 4.5 seconds for a mousemove. This is pretty similar to the approach suggested by @BryceBeagle, which I'd previously ruled out because I felt it wasn't inclusive enough. I worried that not enough people would even attempt to scroll, but instead just sit there baffled. I think this is addressed by listening for mousemove events as well mousewheel events. This also addresses the concern raised by @EatTheRichTextFormat that some users may think the scroll indicator is actually a clickable button, rather than just an instruction. I abandoned the idea of trying to differentiate touchpad users from mousewheel users after extensive testing showed the cadence detection strategy to be too unreliable. Given that we can't stop people with touchpads from seeing this message sometimes, I decided to add language that includes them—without this, I'll certainly get people trying to hold shift and touchpad-swipe up/down, which does not work. I decided to include Macs based on the comment from @rupertjeff, who correctly points out that some Macs have a non-magic mouse plugged in. I looked into the suggestion by @clugg, but determined it's not workable because users would need to scroll all the way to the very bottom of each vertically scrollable elements in order to un-trap their mouse, which no one will ever do. One of these elements is 200 million pixels tall! I've never even scrolled it to the end. Additionally, I updated the initial on-screen instructions to read "Scroll right" instead of just "Scroll" so hopefully more people get it right off the bat without needing the additional instructions. I'm sure there will be some cohort of users who find the new messaging even more confusing, or have some special hardware setup my messaging doesn't anticipate. I'm also sure some people will view this message as an invitation to criticize the UX ("If you know it's confusing, why not fix it?" Answer: because it's too much work). And while it would be nice to have perfect instructions for every single user in every single hardware configuration, I have to balance that with the need to provide a simple, decluttered experience for everyone else who already knows how to scroll. |
Just a thought: With how much scrolling this page requires, I think it would be better to recommend using the arrow keys to scroll instead of the mouse wheel. It also has the added benefit of providing a linear scroll rate. |
@BryceBeagle thank you for the suggestion, but I do not agree |
Computer mouses and web browsers are built for vertical, not horizontal, scroll. This repo would be far better if it was designed for the user to scroll vertically vs horizontally.
The text was updated successfully, but these errors were encountered: