While working on my website, I have encountered a challenge.
The issue arises when dealing with multiple div items. Upon scrolling slightly, the entire page focuses on the div with a height of 100vh, which works perfectly fine. However, my attempts to implement smooth scrolling when clicking on buttons pointing to anchors using various methods like js, css, and jquery have been unsuccessful. After researching for hours, I discovered that the two lines overflow: scroll; and scroll-behavior: smooth; are incompatible with each other. Removing one line disables either the automatic focus on the full height of the div or the smooth scroll functionality of the buttons.
Do you have any ideas on how to integrate these two effects successfully?
(I hope my problem is clear; feel free to ask if you have any questions^^)
<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;
}