<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
overflow-x: hidden;
margin: 0;
}
.scrollpane {
padding: 10px;
display: flex;
/* Active la force d'adhérence sur l'axe des X */
scroll-snap-type: x mandatory;
/* Affiche la barre de défilement */
overflow-x: scroll;
}
.card {
background-color: #eee;
width: 250px;
height: 150px;
/* Espacement entre les */
margin-right: 20px;
/* Conserve la taille des cartes (items) */
flex: 0 0 auto;
/* Aligne le défilement au centre */
scroll-snap-align: center;
}
</style>
</head>
<body>
<div class="scrollpane">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>
Commentaires
Enregistrer un commentaire