Css horizontal touch scroll

How To Create Horizontal Scrolling Containers

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.

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.

The white-space Method

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.

The Flexbox Method

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.

Overflow Scrolling

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:

Scroll bars

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.

Wrap Up

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!

Источник

-webkit-overflow-scrolling

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

Syntax

/* Keyword values */ -webkit-overflow-scrolling: auto; -webkit-overflow-scrolling: touch; /* Global values */ -webkit-overflow-scrolling: inherit; -webkit-overflow-scrolling: initial; -webkit-overflow-scrolling: revert; -webkit-overflow-scrolling: revert-layer; -webkit-overflow-scrolling: unset; 

Values

Use «regular» scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.

Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context.

Formal definition

Formal syntax

-webkit-overflow-scrolling = auto | touch

Examples

HTML

div class="scroll-touch"> p>This paragraph has momentum scrollingp> div> div class="scroll-auto"> p>This paragraph does not.p> div> 

CSS

div  width: 100%; overflow: auto; > p  width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; > .scroll-touch  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */ > .scroll-auto  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */ > 

Results

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• CSS-Tricks article with demo
• Smashing Magazine — describing the effect of scroll bouncing and how it works on different web browsers
• Safari 13 Release notes: Indicates the addition of support for one-finger accelerated scrolling to all frames and overflow:scroll elements, eliminating the need to set -webkit-overflow-scrolling: touch .

Found a content problem with this page?

This page was last modified on Mar 30, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Pure CSS Horizontal Scrolling

The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site! I’d be nice if we could do something like this:

Unfortunately, that’s not going to happen. It’s not even on the roadmap for CSS. That’s too bad, as at the company I work for this would be quite useful. We do quite a few web presentations. Presentations are a very horizontal thing – usually slides have a 4:3 or 16:9 radius. This means we always have a struggle between the horizontality of presentations and the verticality of web technologies. And by we, I mean me. But if there’s one thing I like, it’s a challenge.

The specific use case that led to me digging into this idea that a customer wanted to show all their products on a single slide. Of course, their product catalog was way too big to put in a single view. So we decided to split them up into three categories, each horizontally scrollable. So the three most prominent product in each category were visible and less important products were still easily accessible.

• Create a container with items
• Rotate the container 90 degrees counterclockwise so the bottom is to the right
• Rotate the items back to correct-side up

Step 1) Set up the container

Make a , and make a bunch of child elements.

In this example, our side-scrolling container will be 300px wide, with 8 items of 100×100px each. These are arbitrary sizes; they could be anything.

 
item 1
 
item 2
 
item 3
 
item 4
 
item 5
 
item 6
 
item 7
 
item 8
 

The height of the container will become the “width” and vice-versa. So below, the “width” of our container will be 300px:

.horizontal-scroll-wrapper > div

Step 2) Rotating the container

Now we rotate the container -90 degrees with a CSS transform . And there you have it: a horizontal scroller.

There’s just one tiny issue: our children have rotated too, and now anything within is on its side.

Step 3) Rotate the children back upright

How would we go about getting the children upright again? Rotate them back using another, opposite CSS transform .

.horizontal-scroll-wrapper > div

Step 4) Fixing the positioning

It’s starting to look alright, but there are still some issues.

By rotating the wrapper using the top right as an anchor point, our left side has shifted by the width of the container. If you find this difficult to understand, just put your finger on the top right corner of a page and rotate it. The solution: shift it back with translateY .

Better. But the first item is still missing, due to the same phenomenon happening to the items. We could fix this by giving the first child a top margin of its width or by translating all items the same way we did the wrapper. The easiest way I’ve found though is to add a top padding to the wrapper equal to the item width, creating a kind of buffer for the items.

Here’s another where you can see non-square children:

I have tested on the devices immediately available to me.

Device	OS	Browser	works?
Desktop	Win10	Chrome 54	Y
Desktop	Win10	Firefox 47	Y (w scrollbars)
Desktop	Win10	IE11	Y (w scrollbars)
Desktop	Win10	Opera 41	Y
Desktop	Win10	Vivaldi 1.4	Y
Laptop (touch screen)	Win10	Chrome 54	N
Samsung Galaxy S3	Android 4.3	Chrome Mobile 52	Y
Samsung Galaxy S6	Android 5.0	Chrome Mobile 52	Y
Nexus 6P	Android 6	Chrome Mobile 52	Y
iPad2	iOS	Chrome Mobile 52	N
iPad2	iOS	Safari Mobile 9.0	N
iPad Air 2	iOS	Safari Mobile 9.0	N

Since the styling of scrollbars is currently only supported by WebKit/Blink, Firefox and IE still show the ugly gray ones. You could sniff this out with JavaScript and hide them completely, but that’s stuff for another tutorial.

Using the mouse scroll wheel works great on desktops. My laptop was a different matter, though. Both the touchscreen and the touchpad acted as though the div was not rotated.

I was kind of surprised to find that Android actually understood that the container had been rotated, and let you scroll sideways by swiping left and right.

iOS on the other hand did not play nice. It acted like the container did not get rotated, so you have to swipe up and down to scroll sideways, which of course is counterintuitive. Also, swiping left and right moves the items up and down in their wrapper, which is unexpected and weird. Setting the overflow to hidden does not alleviate this issue.

According to Can I Use, CSS transforms are currently supported by over 93% of users (at the time of this writing, November 2016), so there’s no issue there.

Beware of using this in production, though. I have tested this on some devices, but not at all extensively or in depth.

The greatest issue is with touch inputs that requiring you to swipe up and down to go left and right. A possible solution would be to include a message on your site explaining this, but you’d have to rely on people actually reading your message. And even then it’d still be counterintuitive. Another possible solution would be to capture the touch input with JavaScript on those devices, but then you’d be better off just doing the whole thing in JavaScript and foregoing this CSS hack completely.

Источник