平滑滾動到錨點的問題
[英]Problems with smooth scrolling to an anchor
問題描述
我目前正在開發一個網站，但我遇到了問題。
有幾個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;
}
1 個解決方案
解決方案1
1 已采納 2021-02-10 05:43:10
你能檢查下面的代碼嗎？ 希望它對你有用。 您必須從HTML中刪除scroll-behavior ，並為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>
jQuery平滑滾動錨點問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.