Как создать горизонтальное меню прокрутки, как Google?

Question

Как мы можем создать горизонтальное меню, подобное меню изображений Google?

У кого-нибудь есть такой же код?

Answer 1

это близко к тому, что я хочу, но его нельзя прокручивать мышью, когда я скрываю синюю полосу прокрутки, только что работало на мобильном и другом сенсорном экране.Как я могу перетащить прокрутку с помощью мыши?

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: rgba(0,142,136,1.00);
}

div.scrollmenu {
	background: rgba(229,229,225,1.00);
	padding: 5px;
	overflow: scroll;
  	white-space: nowrap;
	border-top: dotted 5px orange;
	border-bottom:solid 2px orange;
	color: orange;
	
}


div.scrollmenu a {
    background: white;
    display: inline-flex;
    color: blueviolet;
	font-size: 20px;
    text-align: justify;
    margin: 5px;
    text-decoration: none;
    width: 200px;
    height: 200px;
    box-shadow: 5px 5px 5px  #ccffff ;
    
}
.product_img{
	width: 200px;
	height: 200px;
}

	<div class="scrollmenu">
		<a href="#home">1</a>
		<a href="#home">2 </a>
		<a href="#home">3</a>
		<a href="#home">4</a>
		<a href="#home">5</a>
		<a href="#home">6</a>
		<a href="#home">7</a>
		<a href="#home">8</a>
		<a href="#home">9</a>
    <a href="#home">10</a>
	</div>

но его нельзя прокручивать мышью, когда я скрываю синюю полосу прокрутки, только что работал на мобильном и другом сенсорном экране.

Answer 2

Flexbox может быть хорошим началом для вас.Вот хороший пример.Вы можете настроить стили при необходимости

HTML

<ul class="flex-container">
   <li class="flex-item">1</li>
   <li class="flex-item">2</li>
   <li class="flex-item">3</li>
   <li class="flex-item">4</li>
   <li class="flex-item">5</li>
   <li class="flex-item">6</li>
</ul>

CSS

.flex-container {
padding: 0;
margin: 0;
list-style: none;

 display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-flex-flow: row wrap;
justify-content: space-around;
}

.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;

line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}