![]() I’m using ECSS naming conventions here and following the nesting authoring pattern to provide a single source of truth for each selector (sorry Thierry, I know you’d rather see vanilla CSS). You can also manage which apps have Magic Mouse horizontal scroll disabled from the app’s menu in the menu bar. Our navigation HTML structure could look like this: So, how do we get there? Let’s start with some basic HTML: In that case please take a look at the demo page on this site: See the Pen zZZLaP by Ben Frain ( on CodePen.Ī few readers noted that the Codepen embeds don’t work well. It will also help you if you find that your mouse is scrolling horizontally instead of vertically in Windows 11/10. And we will be building to that through the collection of Codepen steps here: : This post will show you how to make your mouse scroll a page horizontally. So, the task in this post is to create a simple scrollable panel for touch, augmented with click and drag functionality for mouse input, along with direction overflow indicators. Of course, the left and right arrow keys will scroll the contents of a window left or right in short steps. However, this is niche/power user functionality - certainly not something we can rely on. If your keyboard is near your mouse, you can hold the shift key down while you operate the scroll wheel. If you choose to hide the scrollbars where you can, it’s still possible to scroll horizontal panels with mouse input by holding down a modifier key (shift on a Mac for example) while using a mouse wheel. You could of course leave the scrollbar visible but despite being able to bespoke the styling, in most situations I still find it quite ugly. By default, there is no direct way to click and drag the content so users can get to any elements out of the visible area. However, for mouse input, the pattern doesn’t work as well. They are an effective way of minimising vertical space while still allowing plentiful content. These days, thanks to the ubiquity of touch devices, users are generally familiar with horizontal scrolling panels. Switch the 'Horizontal scrolling' option from 'Tilt' to 'Roll' (Fig. Here's how to set it up: In the SteerMouse preference pane, select the 'Mouse' tab. I tried to leave in all the mistakes I made along the way to save you from my own folly as such it’s pretty long. Follow these steps to enable and start scrolling using this method: Hit Windows + R keys and type ‘control’ in the Run dialogue box. You can even assign a scroll speed acceleration value if you want to combine slower and faster scroll speeds for enhanced precision. A step-by-step of building up a navigation solution.
0 Comments
Leave a Reply. |