原生CSS滚动效果


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>CSS滚动title>
		<style type="text/css">
			a {
			  display: inline-block;
			  width: 50px;
			  text-decoration: none;
			}
			nav, main {
			  display: block;
			  margin: 0 auto;
			  text-align: center;
			}
			nav {
			  width: 339px;
			  padding: 5px;
			  border: 1px solid black;
				position: sticky;
				top: 0;
			}
			main {
			  display: block;
			  width: 350px;
			  height: 200px;
			  overflow-y: scroll;
			  scroll-behavior: smooth;
			}
			div {
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  height: 100%;
			  font-size: 5em;
			}
		style>
	head>
	<body>
		<nav>
		  <a href="#page-1">1a>
		  <a href="#page-2">2a>
		  <a href="#page-3">3a>
		  <a href="#page-4">4a>
		  <a href="#page-5">5a>
		nav>
		<main>
		  <div id="page-1">1div>
		  <div id="page-2">2div>
		  <div id="page-3">3div>
		  <div id="page-4">4div>
		  <div id="page-5">5div>
		main>
	body>
html>

你可能感兴趣的:(前端原生技术:css)