css 列表内容滚动,css

css

:root {

--surface1: hsl(0, 0%, 90%);

--surface2: hsl(0, 0%, 100%);

--text1: hsl(0, 0%, 20%);

}

html {

height: 100%;

width: 100%;

}

body {

min-height: 100%;

min-width: 100%;

box-sizing: border-box;

margin: 0;

padding: 2rem;

display: grid;

align-content: center;

-webkit-box-pack: center;

justify-content: center;

place-content: center;

font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;

background-color: #1F1F1F;

color: hsl(0, 0%, 20%);

color: var(--text1);

}

.overflow-x {

overflow-x: auto;

overscroll-behavior-x: contain;

border: 1px solid hsl(0, 0%, 80%);

border-radius: 1ex;

background-color: hsl(0, 0%, 100%);

background-color: var(--surface2);

padding: 2rem;

}

.horizontal-friends-list {

display: grid;

grid-auto-flow: column;

grid-auto-columns: 10ch;

grid-gap: 2rem;

gap: 2rem

}

.horizontal-friends-list > figure {

display: grid;

grid-gap: 1ex;

gap: 1ex;

margin: 0;

text-align: center;

position: relative;

cursor: pointer;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-transition: -webkit-transform .2s ease-in-out;

transition: -webkit-transform .2s ease-in-out;

transition: transform .2s ease-in-out;

transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out

}

.horizontal-friends-list > figure:hover {

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

[dir="ltr"] .horizontal-friends-list > figure:last-child::after {

bottom: -2rem;

right: -2rem;

}

[dir="rtl"] .horizontal-friends-list > figure:last-child::after {

bottom: -2rem;

left: -2rem;

}

.horizontal-friends-list > figure:last-child::after {

content: "";

position: absolute;

width: 2rem;

height: 100%;

}

.horizontal-friends-list > figure > picture {

display: inline-block;

width: 10ch;

height: 10ch;

border-radius: 50%;

background:

radial-gradient(hsla(0, 0%, 0%, 0.15) 60%, transparent 0),

radial-gradient(white 65%, transparent 0),

-webkit-gradient(linear, left bottom, right top, from(orange), to(deeppink));

background:

radial-gradient(hsla(0, 0%, 0%, 0.15) 60%, transparent 0),

radial-gradient(white 65%, transparent 0),

linear-gradient(to top right, orange, deeppink)

}

.horizontal-friends-list > figure > picture > img {

display: block;

width: 100%;

height: 100%;

-o-object-fit: cover;

object-fit: cover;

-webkit-clip-path: circle(42%);

clip-path: circle(42%);

}

.horizontal-friends-list > figure > figcaption {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

font-weight: 500;

}