I was wondering if you might agree that CSS is far more complicated than it needs to be? Yes and no, I suppose? It's getting simpler to use as new standard features come out and gain cross-browser support ex. It's also not complicated enough, at times. Using a preprocessor adds complexity in one way, but it's common practice - in most projects, it leads to simpler, more maintainable code than pure CSS.
That will work by "hacking" the code, but it is better to fix the issue that create the overflow in first place. Since the question is specific to horizontal-scroll bar, it's better to add overflow-x: hidden; to avoid vertical scroll bar from not being scrolled which is also a hack FYI. BalasubramaniM: Well, that's slightly better than what's suggested in this answer, but still doesn't help with the "why" question that was actually asked.
Harish Cholla Harish Cholla 1 1 silver badge 4 4 bronze badges. Vortman Vortman 21 2 2 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Podcast Explaining the semiconductor shortage, and how it might end. Does ES6 make JavaScript frameworks obsolete?
Horizontal scrolling aka horizontal navigation has always been considered as a controversial web design technique and for a long time, it used to be one of the biggest web design faux-pas that a website could make. Then again, horizontal scrolling has been around since the early days of the internet and occasionally makes a strong comeback — to the point that during these comebacks, horizontally designed websites are for a brief period considered as the latest and most modern design layout to have.
With the advent of devices such as tablets, the swiping movement has enabled a comeback for horizontal scrolling.
Could it be that because of the swiping movement, users have become more accustomed to horizontal navigation? So how can you do it well? A statement like this, as the first point in an article that offers best practices about horizontal scrolling seems a bit counter-productive, right? Well, given that horizontal scrolling has been, like I said, a subject of dispute between designers and advocates of user experience , it is more than reasonable that you stop and think if this is the only way that you can take in order to attract user attention.
On the other hand, horizontal scrolling, done right, can create some interesting user experience. For instance, there are some very interesting implementations of horizontal scrolling combined with a parallax effect. And how to create great user experience through horizontal scrolling is after all, the objective of this article. According to Damian Rees, there are 4 scenarios where horizontal scrolling creates a good user experience :. Any web designer knows that this is one of the first things you learn about design.
However, after a while we can get a little lazy and decide just to wing it. With a horizontal design you definitely want to take the time to plan it out, draw paper prototypes and mock-ups, and figure out where and how everything is going to fit. There are a lot of things to consider and because it is not what most designers or visitors or used to, you have to plan a lot more than you might with a vertical site. This seems to be the biggest complaint of visitors to horizontal websites.
Even those that look incredible can end up confusing and turning off visitors who will just leave your website and find one that is easier to get around on. Your navigation needs to be obvious and attractive. It needs to look like and behave like users expect it to. Most of us use our mouse wheel or arrow keys to scroll and have all but forgotten that you can click on and move the scroll bar in the first place. Your navigation should be easy to find and easy to use. Make sure there is a clearly visible and easy to use menu of some kind that will get them to the information they want, especially the home page.
In this way they can enjoy the uniqueness of your design for awhile, but then still get to the important information about your business and what you have to offer. Understand that horizontal sites are not as intuitive to visitors as vertical sites which they see all day, every day. Use labels. Your visitors would much rather be told what each thing is than have to click around to figure out how each thing works even if it makes complete sense to you as the designer. When creating your horizontal design you may be tempted to let the design speak for itself, especially as horizontal designs are typically used by trendy sites that are image heavy.
To help users navigate and explore a large 2D plane, consider employing horizontal scrolling. However, note that a drag-and-drop method is more commonplace nowadays than dual vertical and horizontal scrolling.
User testing is useful for determining which approach works best for your specific instance. In any case, these large visual elements should be navigable with the keyboard as well, for accessibility.
So, you think horizontal navigation has a place on your website? Here are some guidelines to keep in mind:. Horizontal scroll should never replace vertical scrolling on a full web page. Violating this convention will alienate the majority of users. If you want different sections of your main page to transition horizontally, consider triggering a horizontal animation with a vertical scroll, as seen on this impressive design agency website :.
In this example, the user is scrolling downward. Even if horizontal scrolling serves your page, we recommend giving desktop users another way to reveal hidden content.
An arrow button can have the same function:. Mobile users will experience fewer issues swiping sideways, so buttons aren't necessary on mobile sites. Still, the primary scrolling orientation should stay vertical on touchscreen devices. On desktop, horizontal scroll bars should be available within their containers. Horizontal scroll bars should look like and function like their vertical counterparts for design consistency.
Avoid custom styling in your scroll bars, since they serve to assist and should not steal focus. There are a couple of exceptions to placing visible scrollbars. If there are buttons on both sides of the container which allow users to scroll, users can click these instead of dragging a scrollbar. Be sure to minimize the chance of visitors missing your content by signaling that horizontal scrolling is possible. In addition to button indicators like arrows, you might set your scrolling containers such that a horizontal scrollbar appears on mouseover.
Or, try showing a sliver of hidden content in your scrollable container. Ecommerce sites like Patagonia do this for product listings — notice the product thumbnails poking out on both sides of the display container:.
Try all of these implementations in your prototyping and testing. For example, in a standard web page, all content below the fold is overflow in the browser window.
If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling. For this to work, the widths of both the container element and child element the element in the container must be specified. Want to flesh out a fancy horizontal scrolling element?
You can also set the overflow-x CSS property to hidden , which prevents child content from wrapping within its container but turns off sideways scrolling. This tells the child content to wrap around to the next line to avoid getting clipped by the container edge, no matter the width of the container. For most of us, vertical scrolling is a reflex — it just makes more sense than its horizontal alternative.
However, horizontal scrolling does have a place in modern web design. When implemented sparingly and intentionally, this method can help structure your pages and present content in a useful manner. If you have doubts about your horizontal scrolling elements, test them with real users not fellow designers. Editor's note: This post was originally published in September and has been updated for comprehensiveness. Originally published Jun 14, AM, updated June 14 Logo - Full Color.
Contact Sales. Overview of all products. Marketing Hub Marketing automation software. Service Hub Customer service software.
0コメント