新属性scroll-snap-type与scroll-snap-align
大漠老师小demo
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Creating horizontal scrolling containers the right way</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--gutter: 20px;
}
ul, li {
list-style: none outside none;
}
body {
display: flex;
justify-content: center;
}
.app {
width: 375px;
height: 667px;
background: #DBD0BC;
overflow-y: scroll;
padding: 30px 0;
margin: 0 10px;
}
.item {
background: url("https://images.pexels.com/photos/1474657/pexels-photo-1474657.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350") no-repeat center, linear-gradient(to bottom, #f36, #890), url("https://images.pexels.com/photos/1473095/pexels-photo-1473095.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350") no-repeat center;
background-size: cover;
background-blend-mode: overlay, screen;
color: #fff;
}
.hs-flex {
padding: 0 20px;
overflow-x: scroll;
scroll-snap-type: x proximity;
display: flex;
}
.hs-flex .item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
min-width: calc(50% - var(--gutter) * 2);
max-width: calc(50% - var(--gutter) * 2);
min-height: 150px;
}
.hs-flex .item:not(:last-child) {
margin-right: calc(var(--gutter) / 2);
}
.app-grid {
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.hs-grid {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: repeat(6, calc(50% - var(--gutter) * 2));
grid-template-rows: minmax(150px, 1fr);
grid-column: 1 / -1;
padding: 0 20px;
overflow-x: scroll;
scroll-snap-type: x proximity;
}
.hs-grid .item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
}
</style>
</head>
<body translate="no" >
<div class="app app-flex">
<ul class="hs-flex">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
<div class="app app-grid">
<ul class="hs-grid">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
</body>
</html>
