CSS 平滑滚动 属性 不起作用
CSS Smooth scrolling property not working
我知道这个问题很多人都问过，但是看了几十个帖子我还是没有找到答案。
我有一个简单的 html 页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JEFDocs | All Docs | Template</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/module.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html">JEF<span>Docs</span></a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Close Navigation">
<ul class="primary-nav">
<li class="current"><a href="docs.html">All Docs</a></li>
<li><a href="https://github.com/orgs/JEF-Napoli/dashboard">GitHub</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</div>
<div class="docs-content">
<div class="left-space">
<p>In this page</p>
<ul class="left-nav">
<li><a href="#1">Item1</a></li>
<li><a href="#2">Item2</a></li>
</ul>
</div>
<div class="right-space">
<!-------------------------------------------------------------------------------------------------------------------------------->
<h1 id="1">Main Title</h1>
<h3>Subtitle</h3>
<p>
Paragraph
With code:
<pre><code class="pyton">print("Hello world")
x=10
print(x)</code></pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe expedita commodi consectetur ipsum. Deleniti delectus, quas voluptatibus eum dolore accusamus aliquid voluptate a error sunt dolores mollitia. At, mollitia.
A nulla eligendi provident exercitationem! Minus perspiciatis eum vel similique, ducimus illum qui sint magnam, asperiores adipisci nesciunt in, rem assumenda repellendus! Blanditiis corporis, quidem dolore expedita consectetur aliquid eius!
Similique, provident illo nihil, unde iure perspiciatis corrupti, eius ad sint consequuntur asperiores error harum? Laborum beatae in dolorem ullam itaque quos deleniti quae debitis, magnam autem ipsa deserunt? Illo!
Nesciunt perspiciatis a corporis necessitatibus sed asperiores voluptas error saepe tempora rem voluptatibus quae ipsa molestias soluta nostrum, non sunt accusamus fuga numquam ut illo dicta! Deleniti magni doloribus ea.
Odio, quas fugiat harum eos animi suscipit dolorum ipsam aliquid perspiciatis, vitae quam assumenda soluta voluptas delectus? Placeat, repellat. Voluptatibus sint blanditiis explicabo similique, exercitationem et tempora consequatur ex asperiores!
Animi vel dignissimos inventore eligendi quisquam alias vitae earum itaque neque fugiat rem amet culpa atque delectus quod, tenetur praesentium in autem porro quam qui reprehenderit! Corrupti soluta qui illum.
Ut at sint, eius aperiam vitae, magni vel harum distinctio excepturi iusto laborum itaque deserunt cumque eaque. Qui ex quas blanditiis repellat, temporibus ab inventore perferendis sapiente cum quo laborum?
Sunt tempora possimus culpa odit numquam, nobis commodi quod, vero repellat autem nostrum laboriosam. Consequuntur hic excepturi in amet unde voluptatibus a? Optio officia obcaecati voluptatem quod dolores minus doloribus?
Nihil alias nesciunt veniam modi similique blanditiis officiis, ratione obcaecati dolores aliquid quos iusto ducimus excepturi voluptas expedita, laboriosam corrupti illum quibusdam doloribus quaerat? Quaerat neque quia impedit atque vel.
Veritatis placeat officia maiores inventore laborum illo enim vitae, ratione, dolorem esse est! Omnis, libero facere eaque vitae fuga ullam cumque consequatur porro ab recusandae, soluta facilis? Quasi, rem voluptate?
Soluta eius molestiae nemo, maiores dolore ratione placeat! Esse, doloribus tempora sint sed rem reiciendis corrupti. Sit mollitia veniam tempora iusto ipsa voluptate quod, eaque veritatis quasi iste hic quas!
Corporis pariatur, esse ipsum labore alias accusamus voluptatem veritatis ipsa possimus deserunt veniam deleniti facilis aliquam magni quidem, eligendi tempore ab dicta amet optio nesciunt provident voluptas eaque? Inventore, ducimus.
Numquam, deserunt voluptatibus veritatis est omnis ducimus ab tempora cupiditate fuga deleniti officiis velit molestiae facilis eveniet debitis, reprehenderit iure repellendus impedit animi dolorum culpa nostrum rerum illo! Quidem, soluta.
Corrupti sapiente eius necessitatibus nostrum incidunt, modi, in quae accusantium totam minima ducimus, aperiam nulla velit eos. Adipisci dignissimos eveniet, quia, voluptatibus unde repellat aperiam doloremque mollitia fugiat minus dolor.
Maxime sequi pariatur, quod, esse animi placeat quibusdam excepturi doloremque consectetur culpa commodi enim. Autem voluptas quasi excepturi natus laborum quas ad voluptatibus adipisci repellendus quia, ratione minus cupiditate itaque.
Voluptate repellendus id molestiae ipsam impedit aspernatur facere magni. Eveniet aut praesentium officiis ea fugit tenetur pariatur, veritatis deserunt! Beatae, vero odit. Aliquam delectus ipsam maxime repellat tenetur, doloribus iure.
Aspernatur vel suscipit sequi enim recusandae ratione perspiciatis, facere, fugiat incidunt, error iusto quibusdam consectetur eos. Quasi vel neque aperiam aliquid rerum, facilis cupiditate deleniti voluptate modi, nihil sunt distinctio.
</p>
<h1 id="2">Second Title</h1>
<p>
Id totam deleniti sit, magni praesentium velit voluptatum, molestias, recusandae nulla ratione quae blanditiis numquam! Sapiente nam unde quidem. Id dolor libero ipsam dolore incidunt corrupti omnis dolorem! Tempora, impedit?
Officia at cum libero unde ipsa veritatis obcaecati est quod delectus sequi voluptatem veniam consequatur sit nobis eveniet eos ab dolore earum vero, molestias nam! Ducimus optio harum necessitatibus debitis.
Dignissimos quo aspernatur iste, itaque vel voluptates fugiat dolorem maiores assumenda repellat accusamus, illo praesentium tempora aliquid sed doloribus provident, optio quia nihil. Consectetur optio quisquam eum deserunt nostrum delectus.
At libero odio suscipit quae veniam possimus dolores eum praesentium aliquid illo, voluptates similique, dignissimos, magni alias debitis harum nemo. Officia, vel! Quis minima, nesciunt eos ipsum rem quos sed!
Ad possimus error, iste facere aut voluptatem odit, voluptatum ea eos fugiat, quas cupiditate? Dolores architecto doloribus repudiandae necessitatibus repellendus officia tenetur perspiciatis, modi fugiat aliquam, tempora unde maiores doloremque.
A, nam id et adipisci nostrum natus eligendi ducimus est quos sed eveniet? Nobis saepe placeat optio natus, atque est eius nesciunt, quaerat deleniti velit consequatur laborum molestiae error dolore?
Ducimus, quam nostrum ipsam ex dolores maxime impedit corrupti deserunt dolor quod similique. Sed nihil explicabo laudantium a aut provident, ex pariatur aspernatur minus cupiditate saepe accusamus, expedita impedit iste!
Vero vel iure, quaerat unde dolore tempora molestias eum facilis cumque consequuntur non totam aperiam cum voluptas qui nihil incidunt fugiat aliquid! Ipsum accusantium vero quod, fugiat soluta illum recusandae.
Facere veniam ut est, tempora suscipit temporibus esse exercitationem reiciendis ipsam eaque dolorum, maiores dolorem ducimus voluptatem accusantium. Dicta dolorem reiciendis rerum explicabo sint pariatur illum tenetur. Laborum, tenetur repellat!
Inventore, optio quas necessitatibus consectetur atque temporibus porro dolorem dicta incidunt eaque et unde animi! Rem eaque unde placeat accusantium repudiandae blanditiis, quod voluptate natus fuga, nisi sit adipisci totam?
Explicabo consequuntur tempore dignissimos, debitis odit mollitia incidunt atque animi esse facere, ipsa ducimus repellendus deserunt laboriosam aliquam. Autem repudiandae voluptate dicta, reiciendis quos iusto voluptates ipsum rem iure incidunt!
</p>
<!-------------------------------------------------------------------------------------------------------------------------------->
</div>
</div>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit')
ul = document.querySelector('ul')
menuArrow = document.getElementById('menu-arrow');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn')
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn')
})
function scrollToTop() {
window.scrollTo({
behavior: 'smooth'
});
}
</script>
</body>
</html>
还有一个 css 文件：
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
:root {
--primary-color: #3272B8;
--secondary-color: #132F47;
}
::-webkit-scrollbar {
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
html {
scroll-behavior: smooth;
}
.docs-content .left-space {
margin: 1em auto;
width: 90%;
padding: .5em;
background: var(--secondary-color);
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.docs-content .left-space .left-nav {
font-size: 1.1em;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
}
.docs-content .left-space p {
margin-left: .7em;
font-weight: bold;
font-size: 1.3em;
color: white;
}
.docs-content .left-space a {
color: white;
display: block;
text-decoration: none;
font-size: .8em;
padding: .5em 1em;
}
.docs-content .left-space a:hover {
color: var(--primary-color);
}
@-webkit-keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}
.docs-content .right-space h1 {
margin: 0;
padding: 0;
color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
.docs-content .right-space {
padding: 1em;
overflow-y: scroll;
}
}
@media only screen and (min-width: 1080px) {
.docs-content {
margin: 3em auto;
width: 1080px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.docs-content .left-space {
height: 65.9vh;
width: 33%;
margin-top: 0;
background: var(--secondary-color);
margin-right: 2em;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
padding: 2em;
}
.docs-content .left-space p {
color: white;
font-size: 1.5em;
margin-top: 0;
margin-left: .3em;
}
.docs-content .left-space .left-nav {
border: none;
display: block;
}
.docs-content .left-space .left-nav a {
color: white;
font-size: 1em;
font-weight: 400;
}
.docs-content .left-space .left-nav a:hover {
color: var(--primary-color);
font-weight: bold;
}
.docs-content .right-space {
margin-top: 0;
height: 70vh;
width: 66%;
overflow-y: scroll;
background: white;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
}
.right-space::-webkit-scrollbar {
width: 12px;
}
.right-space::-webkit-scrollbar-track {
background: #f1f1f1;
}
.right-space::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
.right-space::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
}
/*# sourceMappingURL=module.css.map */
我面临的问题是 html{scroll-behavior: smooth;} 根本不起作用。
我还将包含“main.css”（用于设置顶部导航栏的样式）文件，以便每个人都可以 运行 帮助我：
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
@-webkit-keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
:root {
--primary-color: #3272B8;
}
body {
background: #f2f2f2f2;
margin: 0;
font-family: 'Poppins';
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar {
background: white;
padding: 1em;
}
.navbar .logo {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 1.2em;
}
.navbar .logo span {
color: var(--primary-color);
}
.navbar nav {
display: none;
}
.navbar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar .mobile-menu {
cursor: pointer;
}
.hero {
text-align: center;
margin-top: 3em;
}
.left-col h1 {
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.left-col .primary-cta {
background: var(--primary-color);
color: white;
border: 3px var(--primary-color) solid;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.left-col .primary-cta:hover, .left-col .primary-cta:focus {
background-color: #F2F2F2F2;
color: var(--primary-color);
border: 3px var(--primary-color) solid;
}
.hero-img {
width: 70%;
margin-top: 3em;
-webkit-animation: opacityIn 3s;
animation: opacityIn 3s;
}
nav.menu-btn {
display: block;
}
nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272E;
height: 100vh;
padding: 1em;
}
nav ul.primary-nav {
margin-top: 5em;
}
nav li a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
}
nav li a:hover {
color: var(--primary-color);
font-weight: bold;
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.mobile-menu, .mobile-menu-exit {
display: none;
}
.navbar .container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 180px auto;
grid-template-columns: 180px auto;
}
.navbar nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.navbar nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar nav a {
color: black;
font-size: 1em;
padding: .1em 1em;
}
.navbar nav ul.primary-nav {
margin: 0;
}
.hero-img {
width: 30%;
margin-top: 6em;
}
}
@media only screen and (min-width: 1080px) {
.container {
width: 1080px;
margin: 0 auto;
}
section {
padding: 4em 4em;
}
.hero .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
}
.hero .container .left-col {
margin: 0 3em 0 5em;
}
.hero .container .left-col h1 {
font-size: 3em;
width: 90%;
}
.hero-img {
width: 30%;
margin-right: 8em;
}
.hero-cta {
margin-left: 2em;
}
}
/*# sourceMappingURL=main.css.map */
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit')
ul = document.querySelector('ul')
menuArrow = document.getElementById('menu-arrow');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn')
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn')
})
function scrollToTop() {
window.scrollTo({
behavior: 'smooth'
});
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
:root {
--primary-color: #3272B8;
--secondary-color: #132F47;
}
::-webkit-scrollbar {
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
html {
scroll-behavior: smooth;
}
.docs-content .left-space {
margin: 1em auto;
width: 90%;
padding: .5em;
background: var(--secondary-color);
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.docs-content .left-space .left-nav {
font-size: 1.1em;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
}
.docs-content .left-space p {
margin-left: .7em;
font-weight: bold;
font-size: 1.3em;
color: white;
}
.docs-content .left-space a {
color: white;
display: block;
text-decoration: none;
font-size: .8em;
padding: .5em 1em;
}
.docs-content .left-space a:hover {
color: var(--primary-color);
}
@-webkit-keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}
.docs-content .right-space h1 {
margin: 0;
padding: 0;
color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
.docs-content .right-space {
padding: 1em;
overflow-y: scroll;
}
}
@media only screen and (min-width: 1080px) {
.docs-content {
margin: 3em auto;
width: 1080px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.docs-content .left-space {
height: 65.9vh;
width: 33%;
margin-top: 0;
background: var(--secondary-color);
margin-right: 2em;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
padding: 2em;
}
.docs-content .left-space p {
color: white;
font-size: 1.5em;
margin-top: 0;
margin-left: .3em;
}
.docs-content .left-space .left-nav {
border: none;
display: block;
}
.docs-content .left-space .left-nav a {
color: white;
font-size: 1em;
font-weight: 400;
}
.docs-content .left-space .left-nav a:hover {
color: var(--primary-color);
font-weight: bold;
}
.docs-content .right-space {
margin-top: 0;
height: 70vh;
width: 66%;
overflow-y: scroll;
background: white;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
}
.right-space::-webkit-scrollbar {
width: 12px;
}
.right-space::-webkit-scrollbar-track {
background: #f1f1f1;
}
.right-space::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
.right-space::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
@-webkit-keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
:root {
--primary-color: #3272B8;
}
body {
background: #f2f2f2f2;
margin: 0;
font-family: 'Poppins';
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar {
background: white;
padding: 1em;
}
.navbar .logo {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 1.2em;
}
.navbar .logo span {
color: var(--primary-color);
}
.navbar nav {
display: none;
}
.navbar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar .mobile-menu {
cursor: pointer;
}
.hero {
text-align: center;
margin-top: 3em;
}
.left-col h1 {
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.left-col .primary-cta {
background: var(--primary-color);
color: white;
border: 3px var(--primary-color) solid;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.left-col .primary-cta:hover, .left-col .primary-cta:focus {
background-color: #F2F2F2F2;
color: var(--primary-color);
border: 3px var(--primary-color) solid;
}
.hero-img {
width: 70%;
margin-top: 3em;
-webkit-animation: opacityIn 3s;
animation: opacityIn 3s;
}
nav.menu-btn {
display: block;
}
nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272E;
height: 100vh;
padding: 1em;
}
nav ul.primary-nav {
margin-top: 5em;
}
nav li a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
}
nav li a:hover {
color: var(--primary-color);
font-weight: bold;
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.mobile-menu, .mobile-menu-exit {
display: none;
}
.navbar .container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 180px auto;
grid-template-columns: 180px auto;
}
.navbar nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.navbar nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar nav a {
color: black;
font-size: 1em;
padding: .1em 1em;
}
.navbar nav ul.primary-nav {
margin: 0;
}
.hero-img {
width: 30%;
margin-top: 6em;
}
}
@media only screen and (min-width: 1080px) {
.container {
width: 1080px;
margin: 0 auto;
}
section {
padding: 4em 4em;
}
.hero .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
}
.hero .container .left-col {
margin: 0 3em 0 5em;
}
.hero .container .left-col h1 {
font-size: 3em;
width: 90%;
}
.hero-img {
width: 30%;
margin-right: 8em;
}
.hero-cta {
margin-left: 2em;
}
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JEFDocs | All Docs | Template</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/module.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html">JEF<span>Docs</span></a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Close Navigation">
<ul class="primary-nav">
<li class="current"><a href="docs.html">All Docs</a></li>
<li><a href="https://github.com/orgs/JEF-Napoli/dashboard">GitHub</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</div>
<div class="docs-content">
<div class="left-space">
<p>In this page</p>
<ul class="left-nav">
<li><a href="#1">Item1</a></li>
<li><a href="#2">Item2</a></li>
</ul>
</div>
<div class="right-space">
<!-------------------------------------------------------------------------------------------------------------------------------->
<h1 id="1">Main Title</h1>
<h3>Subtitle</h3>
<p>
Paragraph
With code:
<pre><code class="pyton">print("Hello world")
x=10
print(x)</code></pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe expedita commodi consectetur ipsum. Deleniti delectus, quas voluptatibus eum dolore accusamus aliquid voluptate a error sunt dolores mollitia. At, mollitia.
A nulla eligendi provident exercitationem! Minus perspiciatis eum vel similique, ducimus illum qui sint magnam, asperiores adipisci nesciunt in, rem assumenda repellendus! Blanditiis corporis, quidem dolore expedita consectetur aliquid eius!
Similique, provident illo nihil, unde iure perspiciatis corrupti, eius ad sint consequuntur asperiores error harum? Laborum beatae in dolorem ullam itaque quos deleniti quae debitis, magnam autem ipsa deserunt? Illo!
Nesciunt perspiciatis a corporis necessitatibus sed asperiores voluptas error saepe tempora rem voluptatibus quae ipsa molestias soluta nostrum, non sunt accusamus fuga numquam ut illo dicta! Deleniti magni doloribus ea.
Odio, quas fugiat harum eos animi suscipit dolorum ipsam aliquid perspiciatis, vitae quam assumenda soluta voluptas delectus? Placeat, repellat. Voluptatibus sint blanditiis explicabo similique, exercitationem et tempora consequatur ex asperiores!
Animi vel dignissimos inventore eligendi quisquam alias vitae earum itaque neque fugiat rem amet culpa atque delectus quod, tenetur praesentium in autem porro quam qui reprehenderit! Corrupti soluta qui illum.
Ut at sint, eius aperiam vitae, magni vel harum distinctio excepturi iusto laborum itaque deserunt cumque eaque. Qui ex quas blanditiis repellat, temporibus ab inventore perferendis sapiente cum quo laborum?
Sunt tempora possimus culpa odit numquam, nobis commodi quod, vero repellat autem nostrum laboriosam. Consequuntur hic excepturi in amet unde voluptatibus a? Optio officia obcaecati voluptatem quod dolores minus doloribus?
Nihil alias nesciunt veniam modi similique blanditiis officiis, ratione obcaecati dolores aliquid quos iusto ducimus excepturi voluptas expedita, laboriosam corrupti illum quibusdam doloribus quaerat? Quaerat neque quia impedit atque vel.
Veritatis placeat officia maiores inventore laborum illo enim vitae, ratione, dolorem esse est! Omnis, libero facere eaque vitae fuga ullam cumque consequatur porro ab recusandae, soluta facilis? Quasi, rem voluptate?
Soluta eius molestiae nemo, maiores dolore ratione placeat! Esse, doloribus tempora sint sed rem reiciendis corrupti. Sit mollitia veniam tempora iusto ipsa voluptate quod, eaque veritatis quasi iste hic quas!
Corporis pariatur, esse ipsum labore alias accusamus voluptatem veritatis ipsa possimus deserunt veniam deleniti facilis aliquam magni quidem, eligendi tempore ab dicta amet optio nesciunt provident voluptas eaque? Inventore, ducimus.
Numquam, deserunt voluptatibus veritatis est omnis ducimus ab tempora cupiditate fuga deleniti officiis velit molestiae facilis eveniet debitis, reprehenderit iure repellendus impedit animi dolorum culpa nostrum rerum illo! Quidem, soluta.
Corrupti sapiente eius necessitatibus nostrum incidunt, modi, in quae accusantium totam minima ducimus, aperiam nulla velit eos. Adipisci dignissimos eveniet, quia, voluptatibus unde repellat aperiam doloremque mollitia fugiat minus dolor.
Maxime sequi pariatur, quod, esse animi placeat quibusdam excepturi doloremque consectetur culpa commodi enim. Autem voluptas quasi excepturi natus laborum quas ad voluptatibus adipisci repellendus quia, ratione minus cupiditate itaque.
Voluptate repellendus id molestiae ipsam impedit aspernatur facere magni. Eveniet aut praesentium officiis ea fugit tenetur pariatur, veritatis deserunt! Beatae, vero odit. Aliquam delectus ipsam maxime repellat tenetur, doloribus iure.
Aspernatur vel suscipit sequi enim recusandae ratione perspiciatis, facere, fugiat incidunt, error iusto quibusdam consectetur eos. Quasi vel neque aperiam aliquid rerum, facilis cupiditate deleniti voluptate modi, nihil sunt distinctio.
</p>
<h1 id="2">Second Title</h1>
<p>
Id totam deleniti sit, magni praesentium velit voluptatum, molestias, recusandae nulla ratione quae blanditiis numquam! Sapiente nam unde quidem. Id dolor libero ipsam dolore incidunt corrupti omnis dolorem! Tempora, impedit?
Officia at cum libero unde ipsa veritatis obcaecati est quod delectus sequi voluptatem veniam consequatur sit nobis eveniet eos ab dolore earum vero, molestias nam! Ducimus optio harum necessitatibus debitis.
Dignissimos quo aspernatur iste, itaque vel voluptates fugiat dolorem maiores assumenda repellat accusamus, illo praesentium tempora aliquid sed doloribus provident, optio quia nihil. Consectetur optio quisquam eum deserunt nostrum delectus.
At libero odio suscipit quae veniam possimus dolores eum praesentium aliquid illo, voluptates similique, dignissimos, magni alias debitis harum nemo. Officia, vel! Quis minima, nesciunt eos ipsum rem quos sed!
Ad possimus error, iste facere aut voluptatem odit, voluptatum ea eos fugiat, quas cupiditate? Dolores architecto doloribus repudiandae necessitatibus repellendus officia tenetur perspiciatis, modi fugiat aliquam, tempora unde maiores doloremque.
A, nam id et adipisci nostrum natus eligendi ducimus est quos sed eveniet? Nobis saepe placeat optio natus, atque est eius nesciunt, quaerat deleniti velit consequatur laborum molestiae error dolore?
Ducimus, quam nostrum ipsam ex dolores maxime impedit corrupti deserunt dolor quod similique. Sed nihil explicabo laudantium a aut provident, ex pariatur aspernatur minus cupiditate saepe accusamus, expedita impedit iste!
Vero vel iure, quaerat unde dolore tempora molestias eum facilis cumque consequuntur non totam aperiam cum voluptas qui nihil incidunt fugiat aliquid! Ipsum accusantium vero quod, fugiat soluta illum recusandae.
Facere veniam ut est, tempora suscipit temporibus esse exercitationem reiciendis ipsam eaque dolorum, maiores dolorem ducimus voluptatem accusantium. Dicta dolorem reiciendis rerum explicabo sint pariatur illum tenetur. Laborum, tenetur repellat!
Inventore, optio quas necessitatibus consectetur atque temporibus porro dolorem dicta incidunt eaque et unde animi! Rem eaque unde placeat accusantium repudiandae blanditiis, quod voluptate natus fuga, nisi sit adipisci totam?
Explicabo consequuntur tempore dignissimos, debitis odit mollitia incidunt atque animi esse facere, ipsa ducimus repellendus deserunt laboriosam aliquam. Autem repudiandae voluptate dicta, reiciendis quos iusto voluptates ipsum rem iure incidunt!
</p>
<!-------------------------------------------------------------------------------------------------------------------------------->
</div>
</div>
</body>
</html>
符合我的预期。如果您想知道为什么内部滚动不平滑，您还需要在内部容器上设置滚动行为。添加适当的 css.
.right-space {
scroll-behavior: smooth;
}
您需要将 smooth 添加到 .right-space 以便在全屏时可以平滑滚动。
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
scroll-behavior: smooth;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}
我知道这个问题很多人都问过，但是看了几十个帖子我还是没有找到答案。
我有一个简单的 html 页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JEFDocs | All Docs | Template</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/module.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html">JEF<span>Docs</span></a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Close Navigation">
<ul class="primary-nav">
<li class="current"><a href="docs.html">All Docs</a></li>
<li><a href="https://github.com/orgs/JEF-Napoli/dashboard">GitHub</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</div>
<div class="docs-content">
<div class="left-space">
<p>In this page</p>
<ul class="left-nav">
<li><a href="#1">Item1</a></li>
<li><a href="#2">Item2</a></li>
</ul>
</div>
<div class="right-space">
<!-------------------------------------------------------------------------------------------------------------------------------->
<h1 id="1">Main Title</h1>
<h3>Subtitle</h3>
<p>
Paragraph
With code:
<pre><code class="pyton">print("Hello world")
x=10
print(x)</code></pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe expedita commodi consectetur ipsum. Deleniti delectus, quas voluptatibus eum dolore accusamus aliquid voluptate a error sunt dolores mollitia. At, mollitia.
A nulla eligendi provident exercitationem! Minus perspiciatis eum vel similique, ducimus illum qui sint magnam, asperiores adipisci nesciunt in, rem assumenda repellendus! Blanditiis corporis, quidem dolore expedita consectetur aliquid eius!
Similique, provident illo nihil, unde iure perspiciatis corrupti, eius ad sint consequuntur asperiores error harum? Laborum beatae in dolorem ullam itaque quos deleniti quae debitis, magnam autem ipsa deserunt? Illo!
Nesciunt perspiciatis a corporis necessitatibus sed asperiores voluptas error saepe tempora rem voluptatibus quae ipsa molestias soluta nostrum, non sunt accusamus fuga numquam ut illo dicta! Deleniti magni doloribus ea.
Odio, quas fugiat harum eos animi suscipit dolorum ipsam aliquid perspiciatis, vitae quam assumenda soluta voluptas delectus? Placeat, repellat. Voluptatibus sint blanditiis explicabo similique, exercitationem et tempora consequatur ex asperiores!
Animi vel dignissimos inventore eligendi quisquam alias vitae earum itaque neque fugiat rem amet culpa atque delectus quod, tenetur praesentium in autem porro quam qui reprehenderit! Corrupti soluta qui illum.
Ut at sint, eius aperiam vitae, magni vel harum distinctio excepturi iusto laborum itaque deserunt cumque eaque. Qui ex quas blanditiis repellat, temporibus ab inventore perferendis sapiente cum quo laborum?
Sunt tempora possimus culpa odit numquam, nobis commodi quod, vero repellat autem nostrum laboriosam. Consequuntur hic excepturi in amet unde voluptatibus a? Optio officia obcaecati voluptatem quod dolores minus doloribus?
Nihil alias nesciunt veniam modi similique blanditiis officiis, ratione obcaecati dolores aliquid quos iusto ducimus excepturi voluptas expedita, laboriosam corrupti illum quibusdam doloribus quaerat? Quaerat neque quia impedit atque vel.
Veritatis placeat officia maiores inventore laborum illo enim vitae, ratione, dolorem esse est! Omnis, libero facere eaque vitae fuga ullam cumque consequatur porro ab recusandae, soluta facilis? Quasi, rem voluptate?
Soluta eius molestiae nemo, maiores dolore ratione placeat! Esse, doloribus tempora sint sed rem reiciendis corrupti. Sit mollitia veniam tempora iusto ipsa voluptate quod, eaque veritatis quasi iste hic quas!
Corporis pariatur, esse ipsum labore alias accusamus voluptatem veritatis ipsa possimus deserunt veniam deleniti facilis aliquam magni quidem, eligendi tempore ab dicta amet optio nesciunt provident voluptas eaque? Inventore, ducimus.
Numquam, deserunt voluptatibus veritatis est omnis ducimus ab tempora cupiditate fuga deleniti officiis velit molestiae facilis eveniet debitis, reprehenderit iure repellendus impedit animi dolorum culpa nostrum rerum illo! Quidem, soluta.
Corrupti sapiente eius necessitatibus nostrum incidunt, modi, in quae accusantium totam minima ducimus, aperiam nulla velit eos. Adipisci dignissimos eveniet, quia, voluptatibus unde repellat aperiam doloremque mollitia fugiat minus dolor.
Maxime sequi pariatur, quod, esse animi placeat quibusdam excepturi doloremque consectetur culpa commodi enim. Autem voluptas quasi excepturi natus laborum quas ad voluptatibus adipisci repellendus quia, ratione minus cupiditate itaque.
Voluptate repellendus id molestiae ipsam impedit aspernatur facere magni. Eveniet aut praesentium officiis ea fugit tenetur pariatur, veritatis deserunt! Beatae, vero odit. Aliquam delectus ipsam maxime repellat tenetur, doloribus iure.
Aspernatur vel suscipit sequi enim recusandae ratione perspiciatis, facere, fugiat incidunt, error iusto quibusdam consectetur eos. Quasi vel neque aperiam aliquid rerum, facilis cupiditate deleniti voluptate modi, nihil sunt distinctio.
</p>
<h1 id="2">Second Title</h1>
<p>
Id totam deleniti sit, magni praesentium velit voluptatum, molestias, recusandae nulla ratione quae blanditiis numquam! Sapiente nam unde quidem. Id dolor libero ipsam dolore incidunt corrupti omnis dolorem! Tempora, impedit?
Officia at cum libero unde ipsa veritatis obcaecati est quod delectus sequi voluptatem veniam consequatur sit nobis eveniet eos ab dolore earum vero, molestias nam! Ducimus optio harum necessitatibus debitis.
Dignissimos quo aspernatur iste, itaque vel voluptates fugiat dolorem maiores assumenda repellat accusamus, illo praesentium tempora aliquid sed doloribus provident, optio quia nihil. Consectetur optio quisquam eum deserunt nostrum delectus.
At libero odio suscipit quae veniam possimus dolores eum praesentium aliquid illo, voluptates similique, dignissimos, magni alias debitis harum nemo. Officia, vel! Quis minima, nesciunt eos ipsum rem quos sed!
Ad possimus error, iste facere aut voluptatem odit, voluptatum ea eos fugiat, quas cupiditate? Dolores architecto doloribus repudiandae necessitatibus repellendus officia tenetur perspiciatis, modi fugiat aliquam, tempora unde maiores doloremque.
A, nam id et adipisci nostrum natus eligendi ducimus est quos sed eveniet? Nobis saepe placeat optio natus, atque est eius nesciunt, quaerat deleniti velit consequatur laborum molestiae error dolore?
Ducimus, quam nostrum ipsam ex dolores maxime impedit corrupti deserunt dolor quod similique. Sed nihil explicabo laudantium a aut provident, ex pariatur aspernatur minus cupiditate saepe accusamus, expedita impedit iste!
Vero vel iure, quaerat unde dolore tempora molestias eum facilis cumque consequuntur non totam aperiam cum voluptas qui nihil incidunt fugiat aliquid! Ipsum accusantium vero quod, fugiat soluta illum recusandae.
Facere veniam ut est, tempora suscipit temporibus esse exercitationem reiciendis ipsam eaque dolorum, maiores dolorem ducimus voluptatem accusantium. Dicta dolorem reiciendis rerum explicabo sint pariatur illum tenetur. Laborum, tenetur repellat!
Inventore, optio quas necessitatibus consectetur atque temporibus porro dolorem dicta incidunt eaque et unde animi! Rem eaque unde placeat accusantium repudiandae blanditiis, quod voluptate natus fuga, nisi sit adipisci totam?
Explicabo consequuntur tempore dignissimos, debitis odit mollitia incidunt atque animi esse facere, ipsa ducimus repellendus deserunt laboriosam aliquam. Autem repudiandae voluptate dicta, reiciendis quos iusto voluptates ipsum rem iure incidunt!
</p>
<!-------------------------------------------------------------------------------------------------------------------------------->
</div>
</div>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit')
ul = document.querySelector('ul')
menuArrow = document.getElementById('menu-arrow');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn')
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn')
})
function scrollToTop() {
window.scrollTo({
behavior: 'smooth'
});
}
</script>
</body>
</html>
还有一个 css 文件：
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
:root {
--primary-color: #3272B8;
--secondary-color: #132F47;
}
::-webkit-scrollbar {
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
html {
scroll-behavior: smooth;
}
.docs-content .left-space {
margin: 1em auto;
width: 90%;
padding: .5em;
background: var(--secondary-color);
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.docs-content .left-space .left-nav {
font-size: 1.1em;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
}
.docs-content .left-space p {
margin-left: .7em;
font-weight: bold;
font-size: 1.3em;
color: white;
}
.docs-content .left-space a {
color: white;
display: block;
text-decoration: none;
font-size: .8em;
padding: .5em 1em;
}
.docs-content .left-space a:hover {
color: var(--primary-color);
}
@-webkit-keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}
.docs-content .right-space h1 {
margin: 0;
padding: 0;
color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
.docs-content .right-space {
padding: 1em;
overflow-y: scroll;
}
}
@media only screen and (min-width: 1080px) {
.docs-content {
margin: 3em auto;
width: 1080px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.docs-content .left-space {
height: 65.9vh;
width: 33%;
margin-top: 0;
background: var(--secondary-color);
margin-right: 2em;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
padding: 2em;
}
.docs-content .left-space p {
color: white;
font-size: 1.5em;
margin-top: 0;
margin-left: .3em;
}
.docs-content .left-space .left-nav {
border: none;
display: block;
}
.docs-content .left-space .left-nav a {
color: white;
font-size: 1em;
font-weight: 400;
}
.docs-content .left-space .left-nav a:hover {
color: var(--primary-color);
font-weight: bold;
}
.docs-content .right-space {
margin-top: 0;
height: 70vh;
width: 66%;
overflow-y: scroll;
background: white;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
}
.right-space::-webkit-scrollbar {
width: 12px;
}
.right-space::-webkit-scrollbar-track {
background: #f1f1f1;
}
.right-space::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
.right-space::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
}
/*# sourceMappingURL=module.css.map */
我面临的问题是 html{scroll-behavior: smooth;} 根本不起作用。
我还将包含“main.css”（用于设置顶部导航栏的样式）文件，以便每个人都可以 运行 帮助我：
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
@-webkit-keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
:root {
--primary-color: #3272B8;
}
body {
background: #f2f2f2f2;
margin: 0;
font-family: 'Poppins';
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar {
background: white;
padding: 1em;
}
.navbar .logo {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 1.2em;
}
.navbar .logo span {
color: var(--primary-color);
}
.navbar nav {
display: none;
}
.navbar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar .mobile-menu {
cursor: pointer;
}
.hero {
text-align: center;
margin-top: 3em;
}
.left-col h1 {
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.left-col .primary-cta {
background: var(--primary-color);
color: white;
border: 3px var(--primary-color) solid;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.left-col .primary-cta:hover, .left-col .primary-cta:focus {
background-color: #F2F2F2F2;
color: var(--primary-color);
border: 3px var(--primary-color) solid;
}
.hero-img {
width: 70%;
margin-top: 3em;
-webkit-animation: opacityIn 3s;
animation: opacityIn 3s;
}
nav.menu-btn {
display: block;
}
nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272E;
height: 100vh;
padding: 1em;
}
nav ul.primary-nav {
margin-top: 5em;
}
nav li a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
}
nav li a:hover {
color: var(--primary-color);
font-weight: bold;
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.mobile-menu, .mobile-menu-exit {
display: none;
}
.navbar .container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 180px auto;
grid-template-columns: 180px auto;
}
.navbar nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.navbar nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar nav a {
color: black;
font-size: 1em;
padding: .1em 1em;
}
.navbar nav ul.primary-nav {
margin: 0;
}
.hero-img {
width: 30%;
margin-top: 6em;
}
}
@media only screen and (min-width: 1080px) {
.container {
width: 1080px;
margin: 0 auto;
}
section {
padding: 4em 4em;
}
.hero .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
}
.hero .container .left-col {
margin: 0 3em 0 5em;
}
.hero .container .left-col h1 {
font-size: 3em;
width: 90%;
}
.hero-img {
width: 30%;
margin-right: 8em;
}
.hero-cta {
margin-left: 2em;
}
}
/*# sourceMappingURL=main.css.map */
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit')
ul = document.querySelector('ul')
menuArrow = document.getElementById('menu-arrow');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn')
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn')
})
function scrollToTop() {
window.scrollTo({
behavior: 'smooth'
});
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
:root {
--primary-color: #3272B8;
--secondary-color: #132F47;
}
::-webkit-scrollbar {
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
html {
scroll-behavior: smooth;
}
.docs-content .left-space {
margin: 1em auto;
width: 90%;
padding: .5em;
background: var(--secondary-color);
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.docs-content .left-space .left-nav {
font-size: 1.1em;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
}
.docs-content .left-space p {
margin-left: .7em;
font-weight: bold;
font-size: 1.3em;
color: white;
}
.docs-content .left-space a {
color: white;
display: block;
text-decoration: none;
font-size: .8em;
padding: .5em 1em;
}
.docs-content .left-space a:hover {
color: var(--primary-color);
}
@-webkit-keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes transitionRight {
from {
-webkit-transform: translateX(90px);
transform: translateX(90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}
.docs-content .right-space h1 {
margin: 0;
padding: 0;
color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
.docs-content .right-space {
padding: 1em;
overflow-y: scroll;
}
}
@media only screen and (min-width: 1080px) {
.docs-content {
margin: 3em auto;
width: 1080px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.docs-content .left-space {
height: 65.9vh;
width: 33%;
margin-top: 0;
background: var(--secondary-color);
margin-right: 2em;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
padding: 2em;
}
.docs-content .left-space p {
color: white;
font-size: 1.5em;
margin-top: 0;
margin-left: .3em;
}
.docs-content .left-space .left-nav {
border: none;
display: block;
}
.docs-content .left-space .left-nav a {
color: white;
font-size: 1em;
font-weight: 400;
}
.docs-content .left-space .left-nav a:hover {
color: var(--primary-color);
font-weight: bold;
}
.docs-content .right-space {
margin-top: 0;
height: 70vh;
width: 66%;
overflow-y: scroll;
background: white;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
}
.right-space::-webkit-scrollbar {
width: 12px;
}
.right-space::-webkit-scrollbar-track {
background: #f1f1f1;
}
.right-space::-webkit-scrollbar-thumb {
background: var(--secondary-color);
}
.right-space::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
@-webkit-keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes transitionIn {
from {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
:root {
--primary-color: #3272B8;
}
body {
background: #f2f2f2f2;
margin: 0;
font-family: 'Poppins';
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar {
background: white;
padding: 1em;
}
.navbar .logo {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 1.2em;
}
.navbar .logo span {
color: var(--primary-color);
}
.navbar nav {
display: none;
}
.navbar .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar .mobile-menu {
cursor: pointer;
}
.hero {
text-align: center;
margin-top: 3em;
}
.left-col h1 {
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
-webkit-animation: transitionIn 1s;
animation: transitionIn 1s;
}
.left-col .primary-cta {
background: var(--primary-color);
color: white;
border: 3px var(--primary-color) solid;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.left-col .primary-cta:hover, .left-col .primary-cta:focus {
background-color: #F2F2F2F2;
color: var(--primary-color);
border: 3px var(--primary-color) solid;
}
.hero-img {
width: 70%;
margin-top: 3em;
-webkit-animation: opacityIn 3s;
animation: opacityIn 3s;
}
nav.menu-btn {
display: block;
}
nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272E;
height: 100vh;
padding: 1em;
}
nav ul.primary-nav {
margin-top: 5em;
}
nav li a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
}
nav li a:hover {
color: var(--primary-color);
font-weight: bold;
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.mobile-menu, .mobile-menu-exit {
display: none;
}
.navbar .container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 180px auto;
grid-template-columns: 180px auto;
}
.navbar nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.navbar nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar nav a {
color: black;
font-size: 1em;
padding: .1em 1em;
}
.navbar nav ul.primary-nav {
margin: 0;
}
.hero-img {
width: 30%;
margin-top: 6em;
}
}
@media only screen and (min-width: 1080px) {
.container {
width: 1080px;
margin: 0 auto;
}
section {
padding: 4em 4em;
}
.hero .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
}
.hero .container .left-col {
margin: 0 3em 0 5em;
}
.hero .container .left-col h1 {
font-size: 3em;
width: 90%;
}
.hero-img {
width: 30%;
margin-right: 8em;
}
.hero-cta {
margin-left: 2em;
}
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JEFDocs | All Docs | Template</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/module.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html">JEF<span>Docs</span></a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Close Navigation">
<ul class="primary-nav">
<li class="current"><a href="docs.html">All Docs</a></li>
<li><a href="https://github.com/orgs/JEF-Napoli/dashboard">GitHub</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</div>
<div class="docs-content">
<div class="left-space">
<p>In this page</p>
<ul class="left-nav">
<li><a href="#1">Item1</a></li>
<li><a href="#2">Item2</a></li>
</ul>
</div>
<div class="right-space">
<!-------------------------------------------------------------------------------------------------------------------------------->
<h1 id="1">Main Title</h1>
<h3>Subtitle</h3>
<p>
Paragraph
With code:
<pre><code class="pyton">print("Hello world")
x=10
print(x)</code></pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe expedita commodi consectetur ipsum. Deleniti delectus, quas voluptatibus eum dolore accusamus aliquid voluptate a error sunt dolores mollitia. At, mollitia.
A nulla eligendi provident exercitationem! Minus perspiciatis eum vel similique, ducimus illum qui sint magnam, asperiores adipisci nesciunt in, rem assumenda repellendus! Blanditiis corporis, quidem dolore expedita consectetur aliquid eius!
Similique, provident illo nihil, unde iure perspiciatis corrupti, eius ad sint consequuntur asperiores error harum? Laborum beatae in dolorem ullam itaque quos deleniti quae debitis, magnam autem ipsa deserunt? Illo!
Nesciunt perspiciatis a corporis necessitatibus sed asperiores voluptas error saepe tempora rem voluptatibus quae ipsa molestias soluta nostrum, non sunt accusamus fuga numquam ut illo dicta! Deleniti magni doloribus ea.
Odio, quas fugiat harum eos animi suscipit dolorum ipsam aliquid perspiciatis, vitae quam assumenda soluta voluptas delectus? Placeat, repellat. Voluptatibus sint blanditiis explicabo similique, exercitationem et tempora consequatur ex asperiores!
Animi vel dignissimos inventore eligendi quisquam alias vitae earum itaque neque fugiat rem amet culpa atque delectus quod, tenetur praesentium in autem porro quam qui reprehenderit! Corrupti soluta qui illum.
Ut at sint, eius aperiam vitae, magni vel harum distinctio excepturi iusto laborum itaque deserunt cumque eaque. Qui ex quas blanditiis repellat, temporibus ab inventore perferendis sapiente cum quo laborum?
Sunt tempora possimus culpa odit numquam, nobis commodi quod, vero repellat autem nostrum laboriosam. Consequuntur hic excepturi in amet unde voluptatibus a? Optio officia obcaecati voluptatem quod dolores minus doloribus?
Nihil alias nesciunt veniam modi similique blanditiis officiis, ratione obcaecati dolores aliquid quos iusto ducimus excepturi voluptas expedita, laboriosam corrupti illum quibusdam doloribus quaerat? Quaerat neque quia impedit atque vel.
Veritatis placeat officia maiores inventore laborum illo enim vitae, ratione, dolorem esse est! Omnis, libero facere eaque vitae fuga ullam cumque consequatur porro ab recusandae, soluta facilis? Quasi, rem voluptate?
Soluta eius molestiae nemo, maiores dolore ratione placeat! Esse, doloribus tempora sint sed rem reiciendis corrupti. Sit mollitia veniam tempora iusto ipsa voluptate quod, eaque veritatis quasi iste hic quas!
Corporis pariatur, esse ipsum labore alias accusamus voluptatem veritatis ipsa possimus deserunt veniam deleniti facilis aliquam magni quidem, eligendi tempore ab dicta amet optio nesciunt provident voluptas eaque? Inventore, ducimus.
Numquam, deserunt voluptatibus veritatis est omnis ducimus ab tempora cupiditate fuga deleniti officiis velit molestiae facilis eveniet debitis, reprehenderit iure repellendus impedit animi dolorum culpa nostrum rerum illo! Quidem, soluta.
Corrupti sapiente eius necessitatibus nostrum incidunt, modi, in quae accusantium totam minima ducimus, aperiam nulla velit eos. Adipisci dignissimos eveniet, quia, voluptatibus unde repellat aperiam doloremque mollitia fugiat minus dolor.
Maxime sequi pariatur, quod, esse animi placeat quibusdam excepturi doloremque consectetur culpa commodi enim. Autem voluptas quasi excepturi natus laborum quas ad voluptatibus adipisci repellendus quia, ratione minus cupiditate itaque.
Voluptate repellendus id molestiae ipsam impedit aspernatur facere magni. Eveniet aut praesentium officiis ea fugit tenetur pariatur, veritatis deserunt! Beatae, vero odit. Aliquam delectus ipsam maxime repellat tenetur, doloribus iure.
Aspernatur vel suscipit sequi enim recusandae ratione perspiciatis, facere, fugiat incidunt, error iusto quibusdam consectetur eos. Quasi vel neque aperiam aliquid rerum, facilis cupiditate deleniti voluptate modi, nihil sunt distinctio.
</p>
<h1 id="2">Second Title</h1>
<p>
Id totam deleniti sit, magni praesentium velit voluptatum, molestias, recusandae nulla ratione quae blanditiis numquam! Sapiente nam unde quidem. Id dolor libero ipsam dolore incidunt corrupti omnis dolorem! Tempora, impedit?
Officia at cum libero unde ipsa veritatis obcaecati est quod delectus sequi voluptatem veniam consequatur sit nobis eveniet eos ab dolore earum vero, molestias nam! Ducimus optio harum necessitatibus debitis.
Dignissimos quo aspernatur iste, itaque vel voluptates fugiat dolorem maiores assumenda repellat accusamus, illo praesentium tempora aliquid sed doloribus provident, optio quia nihil. Consectetur optio quisquam eum deserunt nostrum delectus.
At libero odio suscipit quae veniam possimus dolores eum praesentium aliquid illo, voluptates similique, dignissimos, magni alias debitis harum nemo. Officia, vel! Quis minima, nesciunt eos ipsum rem quos sed!
Ad possimus error, iste facere aut voluptatem odit, voluptatum ea eos fugiat, quas cupiditate? Dolores architecto doloribus repudiandae necessitatibus repellendus officia tenetur perspiciatis, modi fugiat aliquam, tempora unde maiores doloremque.
A, nam id et adipisci nostrum natus eligendi ducimus est quos sed eveniet? Nobis saepe placeat optio natus, atque est eius nesciunt, quaerat deleniti velit consequatur laborum molestiae error dolore?
Ducimus, quam nostrum ipsam ex dolores maxime impedit corrupti deserunt dolor quod similique. Sed nihil explicabo laudantium a aut provident, ex pariatur aspernatur minus cupiditate saepe accusamus, expedita impedit iste!
Vero vel iure, quaerat unde dolore tempora molestias eum facilis cumque consequuntur non totam aperiam cum voluptas qui nihil incidunt fugiat aliquid! Ipsum accusantium vero quod, fugiat soluta illum recusandae.
Facere veniam ut est, tempora suscipit temporibus esse exercitationem reiciendis ipsam eaque dolorum, maiores dolorem ducimus voluptatem accusantium. Dicta dolorem reiciendis rerum explicabo sint pariatur illum tenetur. Laborum, tenetur repellat!
Inventore, optio quas necessitatibus consectetur atque temporibus porro dolorem dicta incidunt eaque et unde animi! Rem eaque unde placeat accusantium repudiandae blanditiis, quod voluptate natus fuga, nisi sit adipisci totam?
Explicabo consequuntur tempore dignissimos, debitis odit mollitia incidunt atque animi esse facere, ipsa ducimus repellendus deserunt laboriosam aliquam. Autem repudiandae voluptate dicta, reiciendis quos iusto voluptates ipsum rem iure incidunt!
</p>
<!-------------------------------------------------------------------------------------------------------------------------------->
</div>
</div>
</body>
</html>
符合我的预期。如果您想知道为什么内部滚动不平滑，您还需要在内部容器上设置滚动行为。添加适当的 css.
.right-space {
scroll-behavior: smooth;
}
您需要将 smooth 添加到 .right-space 以便在全屏时可以平滑滚动。
.docs-content .right-space {
margin: 2em auto;
width: 90%;
background: white;
overflow-y: scroll;
padding: 1em;
height: 100vh;
scroll-behavior: smooth;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.514);
-webkit-animation: transitionRight 1s;
animation: transitionRight 1s;
}