The codepen
Hi! So I was just wondering what I could add or remove(removing certain things doesn’t seem to be working, though) to make the white space at the bottom and right go away and have it only scroll horizontally. When i go to dev tools and resize to laptop or any phone it scrolls DOWN. I’m not sure if its something that needs to be done in css or JavaScript. And the scrolling effect doesn’t work on mobile if I dont add overflow-x: scroll; on the body. I really want to understand before using a template I found!
I don’t see any white space at the bottom but the white space to the right is because you have set the wrapper to 500% wide but you have only 2 panels at 20% wide. You would need 5 panels to fill the 500% width. (beware of magic numbers as you don’t really want to tie yourself to 5 panels forever without updating and changing all the css). It should be automatic.
Your image isn’t scaled to fit the background either so if the viewport is wider than the image then the image will stop. You need background-size: cover; on .bg not auto.
That’s not surprising (and not to sound condescending as we all have to learn at some time) 
You hid the overflow with css which means no scrolling and then you added some ancient JS that scrolls the page using the mousewheel. None of my phones have a mousewheel so nothing will happen.
Also I use the keyboard on a desktop to navigate so desktop fails for me also unless the mouse is connected. Also many motor impaired users cannot use a keyboard and would be unable to navigate by keyboard (or some other assistive device).
When designing a site you should first and foremost make it work for everyone regardless of device and devoid of scripts. Once you have a working version that is keyboard friendly and accessible then you can layer on top of that any fancy effects as long as you maintain the underling functionality.
So your task will be to remove the 500% width but allow any number of full width panels as required. This can be done with flexbox and avoiding floats.
Allow scrollbars to appear so keyboard users can scroll (or implement scrolling via the arrow keys with js when you disable scrollbars with js - don’t disable scrolling with css if you are using js for the arrow key scrolling as users without js get no scroll once again).
There’s an awful tot to think about here even for an expert and is not a job I would undertake lightly.
I suggest that first you get a basic version working using the normal browser scrollbars and once that is running try to enhance with js without destroying the accessibility.
1 Like
That was exactly what I wanted to know and more!!!
1 Like
Here’s a rough codepen on how I would start this.
I’ve commented out the js and start with a css only version. This will work on modern mobiles and desktop using the usual features of those devices.
On mobile the scroll snap points css will allow a whole panel slide for touch and indeed on desktop a left scroll with the mouse will flick the panel across (in modern browsers). Older browsers that don’t understand scroll snap points can scroll sideways in the usual way.
The next step would be to add js so that a downward mouse scroll will also slide sideways and then add arrow functionality for keyboard users. Once that is done you can use js to detect for touch and hide scrollbars on desktop if not a touch device.
However, it is already fully functioning and on my mac scrollbars aren’t displayed by default anyway.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.