html語法：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Independent CSS scrolling panels (with inertia)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="Top">Top Content</div>
<div class="Container">
<div class="Left">Left Content</div>
<div class="Middle">Middle Content</div>
<div class="Right">Right Content</div>
</div>
</body>
</html>
css語法：
* { box-sizing: border-box;}body {overflow-x: hidden;}
html,
body { padding: 0; margin: 0; color: #ebebeb;}
.Top {
display: flex;
align-items: center;
justify-content: center;
background-color: darkgreen;
font-size: 3rem;
position: relative;
z-index: 10;
height: 100px;
}
.Container {
display: flex;
overflow: hidden;
height: 100vh;
margin-top: -100px;
padding-top: 100px;
position: relative;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
.Left,
.Middle,
.Right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.Left::-webkit-scrollbar,
.Middle::-webkit-scrollbar,
.Right::-webkit-scrollbar {
display: none;
}
.Left {
width: 12.5rem;
background-color: indigo;
}
.Middle {
flex: 1;
}
.Right {
width: 12.5rem;
background-color: violet;
}