scroll-snap-type

サンプル

<ul class="carousel">

	<li>1</li>

	<li>2</li>

	<li>3</li>

	<li>4</li>

	<li>5</li>

	<li>6</li>

	<li>7</li>

	<li>8</li>

	<li>9</li>

	<li>10</li>

</ul>



ul.carousel{

	display:flex;

	flex-flow:row nowrap;

	overflow-x:auto;

	list-style-type:none;

	scroll-snap-type:x mandatory;

	scroll-padding-inline:50px;

}

ul.carousel > li{

	flex:0 0 60%;

	padding:5rem;

	color:white;

	background:tomato;

	scroll-snap-align: start;

	text-decoration:underline;

	text-align: center;

	scroll-margin-inline: 50px;

}

ul.carousel > li:nth-child(even){

	background:skyblue;

	scroll-margin-inline:0px;

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

解説

jsでゴリゴリ書いていたものをcssでサラッと書けるようになる。

scroll-margin-inlineおよびscroll-padding-inlineを使うことで子要素群(first-childとlast-childは除く)の始端を変えることができる。奇数の要素には親のscroll-padding-inlineの50pxと自身のscroll-margin-inlineの50pxの合計100pxが左端に効いており、偶数の要素に関しては親のscroll-padding-inlineの50pxのみとしている。