我目前正在开发网站,但遇到问题。
有几个div(项目)。当我滚动一点时,页面直接聚焦于整个div(高度为100vh)。这很完美。另一方面,当您单击指向锚点的按钮时,我尝试了几种方法(js,css,jquery)进行平滑滚动,但是它不起作用。经过几个小时的研究,我发现这两条线 overflow: scroll;
和scroll-behavior: smooth;
彼此不兼容。当我删除第一个时,自动聚焦在div的整个高度上将不再起作用,但按钮的平滑滚动将正确起作用,反之亦然。
您知道如何“合并”这两种效果吗?
(希望您能理解我的问题,如果有任何问题要问我^^)
<body>
<div class="container">
<div class="item" id="accueil">
<nav>
<div class="logo" data-aos="fade-up">
<img src="elements/illustrations/head.svg" height="100px" width="100px" alt="">
</div>
<ul class="nav-links" data-aos="fade-up">
<li><a class="smoothScroll current" href="#accueil">Accueil</a></li>
<li><a class="smoothScroll" href="#covid19">Covid-19</a></li>
<li><a class="smoothScroll" href="#cyberharcelement">Cyberharcèlement</a></li>
<li><a class="smoothScroll" href="#anticovid">Anti-Covid</a></li>
<li><a class="smoothScroll" href="#galerie">Galerie Saint Germain</a></li>
</ul>
</nav>
<div class="header">
<section class="left">
<div data-aos="fade-up" class="heading">
<h1>Bonjour 👋 <br> je m'appelle <span id='jules'>Jules</span>, <br> </h1>
<div class="typewriter">
<h1>ravi de vous rencontrer</h1>
</div>
</div>
<a class="button" class="smoothScroll" data-aos="zoom-in-right" href="#covid19">Découvrir</a>
</section>
<section class="right" data-aos="fade-left">
<div class="illustration">
<img src="elements/illustrations/illustration.svg" alt="">
</div>
</section>
</div>
</div>
<div class="item" id="covid19">Covid-19</div>
<div class="item" id="cyberharcelement">Cyberharcèlement</div>
<div class="item" id="anticovid">Anti-Covid</div>
<div class="item" id="galerie">Galerie Saint Germain</div>
</div>
html {
scroll-behavior: smooth !important;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
font-family: var(--inter);
}
.container {
max-height: 100vh;
overflow: scroll;
scroll-snap-type: y mandatory;
}
.item {
color:black;
/* background: #f5f5f5; */
height: 100vh;
scroll-snap-align: start;
}
您能检查下面的代码吗?希望它对您有用。您必须从中删除scroll-behavior
,HTML
并将溢出和滚动行为赋予container
。
请参考此链接:https : //jsfiddle.net/yudizsolutions/wk3scpyr/2/
body {
font-family: var(--inter);
}
.container {
max-height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
.item {
color: black;
/* background: #f5f5f5; */
height: 100vh;
scroll-snap-align: start;
}
<body>
<div class="container">
<div class="item" id="accueil">
<nav>
<div class="logo" data-aos="fade-up">
<img src="elements/illustrations/head.svg" height="100px" width="100px" alt="">
</div>
<ul class="nav-links" data-aos="fade-up">
<li><a class="smoothScroll current" href="#accueil">Accueil</a></li>
<li><a class="smoothScroll" href="#covid19">Covid-19</a></li>
<li><a class="smoothScroll" href="#cyberharcelement">Cyberharcèlement</a></li>
<li><a class="smoothScroll" href="#anticovid">Anti-Covid</a></li>
<li><a class="smoothScroll" href="#galerie">Galerie Saint Germain</a></li>
</ul>
</nav>
<div class="header">
<section class="left">
<div data-aos="fade-up" class="heading">
<h1>Bonjour 👋 <br> je m'appelle <span id='jules'>Jules</span>, <br> </h1>
<div class="typewriter">
<h1>ravi de vous rencontrer</h1>
</div>
</div>
<a class="button" class="smoothScroll" data-aos="zoom-in-right" href="#covid19">Découvrir</a>
</section>
<section class="right" data-aos="fade-left">
<div class="illustration">
<img src="elements/illustrations/illustration.svg" alt="">
</div>
</section>
</div>
</div>
<div class="item" id="covid19">Covid-19</div>
<div class="item" id="cyberharcelement">Cyberharcèlement</div>
<div class="item" id="anticovid">Anti-Covid</div>
<div class="item" id="galerie">Galerie Saint Germain</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句