horizontal scroll container the right way in css

 horizontal scroll container the right way in css
x

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 the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.

Ever since Netflix became a household name we’ve been scrolling sideways in mobile layouts. Instead of stacking everything on top of each other, horizontal scrolling containers (or lists) have become a common layout practice, as it helps reduce the vertical space of devices with smaller screens

Outlining the layout

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.

Overall layout

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).

The scrolling container

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(150px, 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.

• Share