Css горизонтальная прокрутка div

 
Card
 
Card
 
Card
 
Card
 
Card
 
Card
 
Card
 
Card
 
Card
 

Существует два способа сделать эти div горизонтально прокручиваемыми.

Метод пустого пространства

Вот CSS, который нам нужен. Никаких префиксов и jQuery. Простое использование overflow и еще одного свойства.

Для контейнера нужно отключить вертикальную прокрутку ( overflow-y ) и включить горизонтальную ( overflow-x ). Затем для каждой карточки установим display : inline-block , чтобы они отображались в строке.
Свойство CSS, с которым вы, вероятно, не встречались — это white-space : nowrap . Оно используется для управления тем, как текст переносится в контейнере. В данном случае мы хотим отключить перенос с помощью значения nowrap .
Четыре строки свойств CSS, и у нас есть горизонтально прокручиваемый контейнер.
Как насчет поддержки браузерами? Идеально. Если вы не заботитесь об Internet Explorer или Edge. В Microsoft говорят, что они включат поддержку этого свойства в будущую версию браузера Edge.

Метод Flexbox

Flexbox также может выполнить эту работу.

Мы используем flex-wrap для достижения того же эффекта, что и в предыдущем примере.
Поддержка браузерами решения на основе flexbox лучше. Оно работает в IE и Edge.

Overflow прокрутка

В iOS веб-страницы прокручиваются с импульсом ускорения. Если вы быстро протянете пальцем вверх или вниз, страница будет продолжать прокручиваться после того, как уберете палец. Если вы достигнете верхней или нижней части страницы, он а отскочит назад от конца контейнера, прежде чем встанет на место.
К счастью, эту проблему легко решить:

Теперь у нас есть прокрутка для горизонтального контейнера. Вот пример того, как это выглядит:

Полосы прокрутки

По умолчанию контейнер с прокручиваемым контентом будет иметь полосы прокрутки. Но что, если мы не хотим добавлять скроллинг? Такое решение легко реализовать. Хотя работает оно только в браузерах на WebKit.

Заключение

Контейнеры с горизонтальной прокруткой становится все более распространенными.Поэтому лучше сохранить эти примеры:они понадобятся вам в будущем. Также можно обернуть код в медиа-запрос и отобразить горизонтальную прокрутку только для определенных устройств. И никакой головной боли с jQuery!

Источник

Horizontal scrolling div with arrows using HTML and CSS

In this tutorial, we will learn how to create a horizontal scrolling div with arrows using HTML and CSS.

We can make a div horizontally scrollable using the overflow property in CSS.

To make div horizontally scrollable we have to use the x and y-axis properties. We have to set the overflow-y : hidden and make overflow-x:auto , this will hide the vertical scrollbar to hidden and make the div scroll horizontally.

So here, we will make a horizontal scrollable div one without arrows and another with arrows for navigation.

Horizontal Scrolling div using HTML and CSS

Here, we will code the div to make them scrollable horizontally.

Let’s first code our HTML page.

div class="cover"> div class="scroll-images"> div class="child"> img class="child-img" src="img.jpeg" alt="image" /> div> div class="child"> img class="child-img" src="img.jpeg" alt="image" /> div> div class="child"> img class="child-img" src="img.jpeg" alt="image" /> div> div class="child"> img class="child-img" src="img.jpeg" alt="image" /> div> div class="child"> img class="child-img" src="img.jpeg" alt="image" /> div> div class="child"> img class="child-img" src="img.jpeg" alt="image" /> div> div> div> 

Here, we have a parent div with class=»scroll-images» and inside it, we have child elements with class=»child» . And each child event has an image inside it.

Next, we will make the parent element (scroll-images) horizontally scrollable using CSS.

Let’s code the CSS now

.scroll-images < width: 100%; height: auto; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; > .scroll-images::-webkit-scrollbar < width: 5px; height: 8px; background-color: #aaa; > .scroll-images::-webkit-scrollbar-thumb < background-color: black; > .child < width: 120px; height: 100px; margin: 1px 10px; overflow: hidden; > 

Here, we have used display:flex in the parent div and made overflow-y:hidden and overflow-x: auto . This will make the div scroll horizontally.

We have set the flex-wrap:nowrap , so that it doesn’t wrap and is forced onto one line to maintain the horizontal scroll in mobile devices too.

The -webkit-overflow-scrolling: touch is used so that any mobile or touch-screen devices can use the momentum-based scrolling for the given element.

The ::-webkit-scrollbar is used to give color to the scrollbar.

And ::-webkit-scrollbar-thumb is used to give color to the scroll-thumb of the div.

Now let’s add the arrows on both sides of the horizontal parent div and code the functionality with some JavaScript.

Horizontal Scrolling element with arrows

To add the arrows on both sides we have to add some codes to our HTML.

First, we will add the arrow button on both sides of the element.

So we have to wrap the div (scroll-images) with another div with class=»cover» . Added both the left and right buttons on it.

div class="cover"> button class="left" onclick="leftScroll()">Left button> div class="scroll-images"> div> button class="right" onclick="rightScroll()">Left button> div> 

The cover will be position:relative and the buttons will be position:aboslute to position them on both sides.

We have also added two functions with the click event on the button: leftScroll() and rightScroll().

.cover < padding: 0px 30px; position: relative; > .left < position: absolute; left: 0; top: 50%; transform: translateY(-50%); > .right < position: absolute; right: 0; top: 50%; transform: translateY(-50%); > 

Now, we have to code the function to navigate through the child elements in the horizontal div.

The scrollBy() method scrolls an element by a given amount.

When the left arrow is clicked the leftScroll() function is triggered and the element will move 200 on the x-axis and when the right arrow is clicked the element move -200 on the x-axis of the horizontal div.

Note:

If you don’t want to display the scrollbar below add this to your CSS code.

.scroll-images::-webkit-scrollbar

Complete Code:

Other Articles You’ll Also Like:

Источник

CSS Horizontal Scroll: a Step-by-Step Guide

The key concept is to rotate the container 90 degrees and then rotate its child elements 90 degrees backwards to counter the container’s rotation.

Here is a live demo of what we are going to build.

You can find the complete code here.

HTML

With that in mind, we can build it out really fast. Let’s begin with HTML.

 class="container">  src="./images/image1.jpeg" alt="" /> image 1   src="./images/image2.jpeg" alt="" /> image 2   src="./images/image3.jpeg" alt="" /> image 3   src="./images/image4.jpeg" alt="" /> image 4   src="./images/image5.jpeg" alt="" /> image 5   src="./images/image6.jpeg" alt="" /> image 6   src="./images/image7.jpeg" alt="" /> image 7   src="./images/image8.jpeg" alt="" /> image 8   

CSS

CSS code is a bit more complicated but the concept has been covered above. We just need to code carefully and incremently.

Let’s start with the big picture and give the page a structure.

.container  /* Width and height will swap after rotation. To make the container as wide as the screen after rotation, we need to set its initial height to 100vw. */ width: 500px; height: 100vw; > .container div  width: 100%; height: 500px; > img  width: 100%; height: 100%; object-fit: cover; > 

Now, the page should look like this. It’s still far from what we want.

Let’s rotate the container 90 degrees and its children 90 degrees backwards.

.container  . /* translateY(-500px) makes the container align to the left of the screen. */ transform: rotate(-90deg) translateY(-500px); transform-origin: top right; > .container div  . transform: rotate(90deg); > 

Now it’s closer to what we expect but it cannot scroll horizontally yet.

To make it horizontally scrollable is as easy as adding two lines of code.

.container  . overflow-x: hidden; overflow-y: auto; > 

We are almost done except some clean-ups and polishing. Let’s add the following code.

body  margin: 0; > /* To hide the scroll bar. */ ::-webkit-scrollbar  display: none; > *  -ms-overflow-style: none; scrollbar-width: none; > img  . > .container div  . position: relative; margin: 10px 0; > .container div:first-child  margin: 0; > p  padding: 10px; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); > 

The final page should look like this and scroll horizontally.

Here is the complete CSS code.

body  margin: 0; > ::-webkit-scrollbar  display: none; > *  -ms-overflow-style: none; scrollbar-width: none; > img  width: 100%; height: 100%; object-fit: cover; > .container  width: 500px; height: 100vw; transform: rotate(-90deg) translateY(-500px); transform-origin: top right; overflow-x: hidden; overflow-y: auto; > .container div  position: relative; width: 100%; height: 500px; transform: rotate(90deg); margin: 10px 0; > .container div:first-child  margin: 0; > p  padding: 10px; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); > 

Notes

• In this example, we used squared child elements (500 * 500 images) and there is a reason for this. If the width:height ratio was not 1:1, we would have to work out how much to offset the child elements after rotation so that they do not overlap each other.
• For such cases and more advanced functionalities or effects, you would want to write some javacript code.

Источник