Horizontal scrollbar css

Horizontal scrollbar css DEFAULT

The white-space Method

As a front end developer, more and more frequently I am given designs that include a horizontal scrolling component. This has become especially common on mobile to help reduce the vertical height of dense pages. We’ve all seen them before. Our comp has something like this:

After building a couple of these and battling through unexpected bugs in the QA process, I wanted to find out once and for all how to create a horizontal scroller with minimal code that worked as expected across all types of devices.

Let’s first create our container and our children divs inside of it that will scroll horizontally. The HTML is pretty simple.

<div class="scrolling-wrapper">
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
</div>

There are two different ways to make these divs scroll horizontally and which path you choose will probably come down to personal preference and/or browser support.

Here’s all the CSS that we need. No vendor prefixes, no jQuery, just some simple use of overflow and a property you probably haven’t heard of.

.scrolling-wrapper {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;

.card {
display: inline-block;
}
}

On our container, we want to turn off vertical scrolling (overflow-y) and enable horizontal scrolling (overflow-x). Then with each card, we want to set it to display with inline-block so they all display in a row.

The line of CSS you probably are unfamiliar with is white-space: nowrap. This property is used to control how text wraps around a container. In this case, we want to disable that wrapping by using nowrap.

That’s it. Four lines of CSS properties and we’ve got a horizontal scrolling container.

As to browser support? It’s perfect. Unless you care about Internet Explorer or Edge. Microsoft says they will likely include it in a future version of Edge. But for now, it’s not available.

Flexbox can make this work for us too.

.scrolling-wrapper-flexbox {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;

.card {
flex: 0 0 auto;
}
}

Essentially we are using flex-wrap to achieve the same effect as white-space above. There’s no real difference between what the two properties are doing.

Browser support is better for the flexbox solution. You might need to pull in some vendor prefixes for older browsers, but at least this solution works with IE and Edge.

Web pages on iOS scroll with momentum if you are scrolling up and down. If you flick your finger up or down quickly, the page will keep scrolling after you let go. If you reach the top or bottom of the page, the page will bounce past the end of the wrapper before bouncing back into place.

For a horizontal element, by default, we won’t have that smooth scrolling.

Luckily it’s easy to turn on. Just remember, while the prefix says webkit, this is most noticeable on iOS.

.scrolling-wrapper {
-webkit-overflow-scrolling: touch;
}

Now we have the buttery smooth scrolling on a horizontal container. Here’s an example of what that looks like:

By default a container that has scrolling content will have scroll bars. Makes sense, right? But what if we don’t want that scroll bar there for UX or design purposes? Well that’s simple too. This is for webkit browsers only, however.

.scrolling-wrapper {
&webkit-scrollbar {
display: none;
}
}

Looking at this code, this isn’t all that complicated. But it uses a number of properties that aren’t used on a regular basis and thus probably aren’t as familiar.

As this becomes a more common piece of design, it’s smart to file these snippets away because you’ll probably need them over and over. What’s great is because this is pretty simple, you can wrap this inside of a media query and display the horizontal scroller only for certain devices. There’s no headaches of jQuery or anything messy.

Update: If you’d like a CSS Grid solution, Dannie Vinther has explored that topic!

Sours: https://codeburst.io/how-to-create-horizontal-scrolling-containers-de9c6

How TO - Horizontal Scroll Menu

&#; PreviousNext &#;


Learn how to create a horizontal scrollable menu with CSS.


HomeNewsContactAboutSupportBlogToolsBaseCustomMoreLogoFriendsPartnersPeopleWork

Try it Yourself »


How To Create a Horizontal Scrollable Menu

Step 1) Add HTML:

Example

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
 
</div>


Step 2) Add CSS:

The trick to make the navbar scrollable is by using and :

Example

div.scrollmenu {
  background-color: #;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #;
}

Try it Yourself »

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.


&#; PreviousNext &#;


Sours: https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
  1. Us navy seal pistol
  2. Dv lottery case number meaning
  3. Lonely planet malta
  4. North american arms custom grips
  5. Deck railing kits

Creating horizontal scrolling containers the right way [CSS Grid]

I will not go into a deep discussion about the UX aspects of horizontal scrolling; however, when resorting to a horizontal scrolling layout, it seems that there are at least two UX principles which must be fulfilled:

  1. Your design must have a visual hint that a set of content is horizontally scrollable. The best way to do it is, letting a part of the scrollable content peek out.
  2. It’s important for the user to know when the scroll ends. We have noticed users repeat the scroll operation because they think that they didn’t scroll enough in the previous attempt. A way of indicating the end of the list is use of extra space at the end.

Before we begin, let us outline the layout features we want to accomplish:

  • The scrolling container must follow the overall layout of the page — i.e., respecting the margins and padding
  • Part of the scrollable content must peek out from the edge
  • The content of the container must slide off the edges of the screen when scrolling
  • The gutter between the content must be smaller than that of the edges, so that there will be more space at either end of the container (indicating to the user that they have scrolled to the end)

So something along the lines of this:

Notice that there is an equal amount of space at either end of the horizontal scrolling container matching the surrounding content width.

Now that we have a fundamental understanding of the features we want our horizontal scrolling container to have, let us look into how we might come about coding it using CSS Grid. The convenient thing about CSS Grid is that we can seamlessly control the gutter between the elements without further calculations.

For the overall layout we’ll use a simple yet powerful CSS Grid technique:

.app {
display: grid;
grid-template-columns: 20px 1fr 20px;
}.app > * {
grid-column: 2 / -2;
}.app > .full {
grid-column: 1 / -1;
}

Any direct children of .app will be ‘containerized’ with a 20px gap on both ends keeping the content off the edges. If a child is equipped with a class of .full, it will span across the entire viewport without any padding on the side (aka. full bleed).

Let us create the horizontal scrolling container with six cards, showing two at a time. As we want the horizontal scrolling container to follow the overall layout with padding on both sides, we omit the .full class and might try something like this:

.hs {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(6, calc(50% - 40px));
grid-template-rows: minmax(px, 1fr);
}

Using grid-template-columns we can set up how much space we want each card should take up — in this example, the cards take up 50% of the viewport. When subtracting the gutter, we end up seeing the third card peeking out at the end.

However — as you might have noticed — the cards are cut off at both ends. Remember, we want the scrollable content to slide of the edges of the screen when we scroll.

So let’s add a class of .full to the container and compensate for the lack of padding:

.hs {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(6, calc(50% - 40px));
grid-template-rows: minmax(px, 1fr);
padding: 0 20px;
}

At first glance, it seems that we’ve achieved the desired result, but once you scroll to the end, you will notice that there isn’t any space — thus not respecting the overall layout.

You might want to deal with it by adding a margin-right to the last element like so:

.hs > li:last-child {
margin-right: 20px;
}

Unfortunately, this doesn’t work either. So how might we solve it?

Let’s consider what we have, once we remove the padding of the container:

.hs {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(6, calc(50% - 40px));
grid-template-rows: minmax(px, 1fr);
}

If we add some empty spaces to either side of the grid-template-columns acting as padding, we should be able to achieve our desired layout.

Let’s add 2 x 10px empty spaces to the grid-columns at both ends. Combined with the grid-gap value of 10px, we have 20px in total, thus following the padding of the overall layout.

.hs {
display: grid;
grid-gap: 10px;
grid-template-columns:
10px
repeat(6, calc(50% - 40px))
10px;
grid-template-rows: minmax(px, 1fr);
}

In order to not having the first card take up the space of the first column of 10px, we bring in empty pseudo elements at each end like so:

.hs::before,
.hs::after {
content: ‘’;
}

The ::before and ::after elements fits perfectly in the grid-columns, as there are automatically added to the start and the end of the horizontal scrolling container. Thankfully, pseudo elements participate in the grid.

Now we are fulfilling all of the layout features we outlined at the beginning:

One caveat of this technique is the fixed number of cards you have to specify in the grid-template-columns:

grid-template-columns:
10px
repeat(6, calc(50% - 40px))
10px;

If one of the containers only contains 4 cards, you will need to set up a new grid rule for that particular container. And that’s not very flexible.

One way of making it more flexible is by counting how many cards there are in the specific container using Javascript and then assigning this number to a CSS Variable:

var root = document.documentElement;
const lists = document.querySelectorAll('.hs');lists.forEach(el => {
const listItems = el.querySelectorAll('li');
const n = el.children.length;
el.style.setProperty('--total', n);
});

Then you can use the variable inside the grid-template-columns:

grid-template-columns:
10px
repeat(var(--total), calc(50% - 40px))
10px;

UPDATE: As Alex Baciu mentions in the comments, you could omit javascript (or a CSS variables solution) entirely by taking advantage of the implicit grid. This way, we don’t need to calculate the number of overflowing columns we need, as this is computed for us by the browser.

For this to work, we will need to set up our code a bit differently:

.hs {

grid-template-columns: 10px;
grid-auto-flow: column;
grid-auto-columns: calc(50% - var(--gutter) * 2);

hs:before,
.hs:after {
content: '';
width: 10px;
}

We still need our initial 10px to compensate for the padding; however, the rest of the cards are now being laid out by the auto-placement algorithm. In order for this to work though, we need to set auto-flow to ‘column’ (the default is ‘row’).

Finally, we need to make sure, that the .hs:after — which inherit the size of the other cards — doesn’t take up more space than 10 pixels. So we limit the size of the pseudo elements by applying a fixed width.

You could argue, that the code becomes less legible, as the values are scattered a bit more making it somewhat less obvious what is going on. However, I guess that is fine :)

Sours: https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-cf64fc
Portfolio Pure CSS Scroll Snapping Tutorial

Troubleshooting Scroll Bar Issues

Something on our page is causing a horizontal scroll bar in the web browser. This scroll bar appears at any window width and any screen resolution.

web render of the bottom of the page with the horizontal scroll bar

Our problem is one that's relatively easy to fix, but a lot of times, horizontal scroll bars are difficult to troubleshoot. Typically, a single width property, or any combination of width properties, are causing something to render in more space than the page allows. In our case, the footer of our page has a width property set to %:

Exiting code block.

Web browsers do not take into account the width of the scrollbar on the side of a page when computing width values, so since we have a page that is longer than a single viewport, part of our page is being rendered behind the vertical scroll bar, causing the browser to display a horizontal scroll bar.

One way we can fix this is to change the display property of the footer. Currently, the footer doesn't have a display property explicitly defined, so it is defaulting to display: block;. We could also fix our scroll bar problem by replacing the width property with a display property with the value flex. Flex display allows an element to be displayed as a block element but also fill its parent container.

Step1. To fix the footer display, change the code as shown below:

Exiting code block.

NOTE: We are replacing width: %; with display: flex;.

This should fix our scroll bar problem. Let's test it now.

Step2. Save style.css and refresh index.html.

The horizontal scroll bar has disappeared:

web render of the bttom of the page without a horizontal scroll bar and columns

As you can see, this has also changed the way the children of footer (the <section> elements) display, allowing them to more appropriately fill the available space. The alignment of those items still isn't quite what we would like, but we will see how to fix that in the following challenge exercise.

NOTE: To learn more about the flex properties and values and how to effectively use them, see our workshop, HTML5 & CSS: Creating Style for the Web.

Sours: https://ittrainingcontent.iu.edu/training/htmsp/files/pc/troubleshooting-scroll-bar-issues.html

Css horizontal scrollbar

When you think of “scrolling” on websites and applications, one direction probably comes to mind first: downward.

This makes sense — virtually every web page structures its content vertically. To see more, simply scroll down past the fold with your mouse, trackpad, or keyboard. Some websites might try to enhance the user experience with animated fly-in elements or parallax effects. Even so, the orientation of the scroll almost always stays vertical.

Vertical scrolling works all fine and goodbut what about its X-axis counterpart, horizontal scrolling? You might have considered adding this rarer functionality to your site. But, is the horizontal scrolling method intuitive, or even useful? Is it better than a vertical scroll? And how can it enrich your UX?

In this post, I’ll answer all these questions, then show you how to create basic horizontal scrolling with custom HTML and CSS if you see it as a good fit for your site.

Download Our Free UX Research & Testing Kit

What is horizontal scrolling?

Horizontal scrolling is a page navigation method in which the user scrolls left and right to reveal content from the sides of the window or container. Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one’s finger on a touchscreen.

In other words, the scroll wheel causes the page to move horizontally across the screen rather than vertically. Here's an example of vertical scrolling on a photographer's website: 

Horizontal Scroll Example: Gabriel Cuallado's Photography WebsiteImage Source

Whereas vertical navigation is foundational on the vast majority of websites, we see horizontal much less frequently. This is because horizontal scrolling is widely regarded as an ineffective and outdated UI method with few practical uses.

That might sound a bit harsh, so let’s expand on it and discuss why you probably aren’t scrolling sideways all too often.

Disadvantages of Horizontal Scrolling

Opinions on horizontal scrolling skew negative among both web designers and web users. Even I’m not too keen on it myself for a few reasons:

It violates users’ expectations.

Vertical scrolling is the navigational norm. Aside from the occasional stylistic embellishment, every web page structures its content vertically. So, naturally, users will expect to scroll this way and not left-to-right.

It’s okay to break a design rule every so often to add some visual flair and spice. But, defying this particular convention without a clear purpose will confuse and frustrate visitors more than engage. And many will just assume your page/page element is broken.

What about touchscreens, though? While the emergence of smart mobile technologies has normalized the sideways swiping gesture (looking at you, Tinder), users will naturally scroll down on a mobile website if unprompted. So, it’s typically best to keep the vertical scrolling on both your desktop and mobile sites.

It has a high interaction cost.

In UX terms, interaction cost is the amount of effort it takes for a user to complete an action, such as interacting with a page element. Interaction cost comprises (1) how hard we have to think about a task and (2) the physical effort required to complete the task.

Vertical scrolling has a low interaction cost. Again, we expect it, so we hardly need to think to do it. It’s also ergonomically efficient to scroll vertically, thanks to your mouse wheel, trackpad, or arrow keys.

Horizontal scrolling, on the contrary, has a much higher interaction cost.

Mentally, we must adjust to the new scroll orientation and process content entering from a new screen direction. We’re not used to the extra cognitive load, and this negatively impacts our viewing experience. Users in need of the horizontal scroll bar also need to locate this element, which takes extra work.

Horizontal scrolling is more physically demanding on users as well. Trackpad and mobile users may swipe sideways to reveal content, but this isn’t possible for desktop users equipped with a standard mouse. These users must either move to the arrow keys or click and drag the scroll bar.

It’s easily missed or ignored.

This problem stems from a lack of expectation — if users don’t know that horizontal navigation is coming up on a web page, they won’t look for it, missing out on potentially relevant content.

Clear visual cues to horizontal navigation, such as arrow icons or informational text, can partially resolve this problem. But, there’s still a chance users will miss it. If they do happen to notice the cues, it still might not be clear to them what the hidden content actually is. In this scenario, most simply won’t be bothered to engage with content outside the viewport.

It presents challenges for accessibility.

An extra scroll dimension compounds the difficulties of plain vertical scrolling, especially when both are used at the same time. A page element with both horizontal and vertical scrolling can disorient, and is difficult for people with motor impairments to use.

For those with physical limitations, mental limitations, or just less experience with tech, horizontal scrolling is often an unnecessary obstacle that can be avoided with better design.

When Horizontal Scrolling Works

Given the problems with horizontal scrolling, you might wonder if there’s ever a case where such a function would be useful.

But don’t rule it out just yet. There are a few instances in which horizontal scrolling may be effective if implemented carefully and precisely. Let’s now cover its most common uses:

To Conceal Secondary Content

On any website, you want to minimize the amount of scrolling users must perform to reach their desired content. This is where horizontal-scroll can come into play: You can save vertical page space by placing a special element, one which reveals related content from a horizontal scroll.

Most implementations of this method clearly indicate the scrolling feature, and offer an alternative navigation method, like a button click, to reveal more content. For example, users can horizontally scroll through an image gallery or thumbnail links to blog posts or news articles.

To Display Offerings by Category

On a related note, horizontally scrolling containers are useful for segmenting your content by category. Users scroll vertically to find their category of interest, then sideways to locate a specific product, video, article, or another type of item within that category.

Ecommerce sites use this method to divide their catalog into product types. Streaming platforms do the same with their films and series. See how Netflix integrates horizontal scrolling into its UI:

Horizontal Scrolling Categories on Netflix.Com

Image Source

Also, notice that this example offers a scrolling alternative, arrow buttons.

To Navigate a Large Image or Visual Element

Sometimes a single element might be too big for your page, and you want to fit it into a smaller window element. Maps, images with a lot of detail, and stretched-out visualizations like timelines all present this design challenge. 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.

Horizontal Navigation Best Practices

  1. Avoid horizontal scrolling on full webpages.
  2. Enable other interaction methods.
  3. Design horizontal scrollbars like vertical scrollbars.
  4. Make the horizontal scroll option visually apparent.

So, you think horizontal navigation has a place on your website? Here are some guidelines to keep in mind:

1. Avoid horizontal scrolling on full webpages.

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:

Example of Horizontal Animation With Vertical Scroll

Image Source

In this example, the user is scrolling downward. The entrance of media from the right is unexpected at first, but you quickly pick up on what’s happening.

2. Enable other interaction methods.

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:

Horizontal Scrolling Interaction Method on Google Search Page

Image Source

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.

3. Design horizontal scrollbars like vertical scrollbars.

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. Also, don’t show a scrollbar if the contents of a container loop back to the beginning at the end of the content stream.

4. Make the horizontal scroll option visually apparent.

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:

horizontal scrolling on patagonia.com

Image Source

Lastly, instructional text like “Scroll for more” also works. Try all of these implementations in your prototyping and testing.

How to Create Horizontal Scrolling Containers in HTML and CSS

When an HTML element — let’s say a <div> — contains content that exceeds its boundaries, this is called overflow. For example, in a standard web page, all content below the fold is overflow in the browser window.

To enable horizontal scrolling, we can use the CSS property overflow-x.

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.

a text box with horizontal scrolling enabled

Let's break down this method into more detail below.

Step 1: Use HTML to create the container.

In this example, I’ve created a <div> container element with a width of pixels. Inside this <div> container is a <p> child element with a set width of pixels. Since the width of <p> exceeds the width of <div>, the text overflows to the right of the container.

Here’s the HTML code for my example as shown above:

Step 2: Use CSS to specify a set width for the container and apply scroll behavior.

Setting overflow-x: scroll to the container <div> renders a scrollbar inside it.

Here's the corresponding CSS code for my example:

Want to flesh out a fancy horizontal scrolling element? CSS Tricks, Codeburst, and UX Collective all offer detailed tutorials you can reference for building custom containers.

How to Disable Horizontal Scrolling

If you do not set the width of the child element within its parent <div>, the contents of the child element will wrap around to the next line, avoiding overflow. 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.

Another solution is to set the width of child elements to %. 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.

Scrolling Sideways

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.

Ultimately, you’re designing for the average visitor, so usability precedes any stylistic embellishment. If you have doubts about your horizontal scrolling elements, test them with real users (not fellow designers). If feedback is negative, don’t hesitate to fall back on a different approach.

Editor's note: This post was originally published in September and has been updated for comprehensiveness.

ux templates

Sours: https://blog.hubspot.com/website/horizontal-scrolling
bootstrap problem - horizontal scrollbar in bottom page

Make a div horizontally scrollable using CSS

Making a div horizontally scrollable is easy by using CSS overflow property. There are different values in overflow property.

For example overflow: auto; and the axis hiding procedure like overflow-x: auto;. It will make only a horizontal scrollable bar.
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Example 1:

HTML

Output:



Example 2: In this example use auto in place of overflow-y: hidden; and overflow-x: auto; to make div horizontally scrollable.

HTML

Output:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.




My Personal Notesarrow_drop_up
Sours: https://www.geeksforgeeks.org/make-a-div-horizontally-scrollable-using-css/

You will also be interested:

What is she. asked the red-haired Seryoga suddenly in the silence. - Nothing.



1756 1757 1758 1759 1760