如何解决使用html#标签滚动动画
我目前正在尝试对网站进行编码,以使其动画在x轴上移动以访问页面的不同部分(“ tab-content”中的页面内容)。我有一个导航栏,它具有不同的标题,此标题是固定的,我希望用户单击每个标题并转到该部分。我设法用一些JS代码将用户带到所需的部分/格,但是,突然出现在屏幕上的默认部分/格没有动画。如何使用纯JS或CSS制作动画。我需要单击标题才能将用户移动(移动)到该div。我是Web开发人员的新手。
这是我的一些代码
HTML
<div class="main-info">
<div class="nav-container">
<div class="nav-bar">
<ul>
<li data-tab-target="#show" class="tab"><a href="#show">Show</a></li>
<li data-tab-target="#about" class="tab"><a href="#about">About</a></li>
<li data-tab-target="#lookbook" class="tab"><a href="#lookbook">Lookbook</a></li>
<li data-tab-target="#process" class="tab"><a href="#process">Process</a></li>
</ul>
</div>
<div class="info overlay">
<div class="text">
<a href="#">MA</a>
<a href="#">Coming Soon</a>
<a href="#">BA</a>
</div>
<a href="index.html" class="info-back">Back</a>
</div>
</div>
<div class="tab-content">
<div id="show" data-tab-content class="active">
<p>VIDEO</p>
</div>
<div id="about" data-tab-content>
<p>About</p>
</div>
<div id="lookbook" data-tab-content>
<p>Lookbook</p>
</div>
<div id="process" data-tab-content>
<p>Process</p>
</div>
</div>
</div>
CSS
.main-info {
background-color: transparent;
height: 100vh;
overflow: hidden;
}
.nav-container {
position: fixed;
}
.nav-bar {
width: 80vw;
height: 10vh;
left: 10vw;
position: absolute;
top: 5vh;
}
.nav-bar ul {
text-transform: uppercase;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.tab a {
font-family: Helvetica,sans-serif;
font-weight: bold;
font-size: 1rem;
color: black;
text-decoration: none;
}
.tab:hover {
cursor: pointer;
opacity: 0.6;
}
.tab.active {
background-color: whitesmoke;
}
.info {
width: 90vw;
height: 10vh;
/* border: 1px solid red; */
left: 5vw;
position: absolute;
top: 80vh;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.info a {
font-family: Helvetica,sans-serif;
font-weight: bold;
font-size: 1.1rem;
color: black;
text-decoration: none;
border: 1px solid teal;
}
.text {
width: 30%;
display: flex;
justify-content: space-between;
}
.tab-content {
border: 1px solid teal;
position: absolute;
left: 0;
top: 0;
height: 100vh;
z-index: -11;
display: flex;
flex: row nowrap;
justify-content: flex-start;
}
[data-tab-content] {
border: 1px solid blueviolet;
background-color: violet;
font-size: 3rem;
color: blue;
scroll-behavior: smooth;
display: none;
width: 100vw;
height: 100vh;
}
.active[data-tab-content] {
display: block;
}
JS
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
tab.addEventListener('click',() => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
});
tab.classList.add('active')
target.classList.add('active');
});
});
解决方法
您几乎明白了。不用在可滚动元素内部的元素上设置scroll-behavior
,而是将其放在具有滚动条的元素上。
.tab-content {
scroll-behavior: smooth;
}
或者在最上方的元素上,使所有元素以平滑的滚动动画移动。
:root {
scroll-behavior: smooth;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。