Hé! Mielőtt túl messzire megy le a nyúl lyuk JavaScript-alapú finomgörgetés, tudja, hogy van egy natív CSS jellemző erre: scroll-behavior.
html ( scroll-behavior: smooth; )Mielőtt egy olyan könyvtárhoz fordulna, mint a jQuery, ott van a gördülékeny görgetés natív JavaScript-verziója is, például:
// Scroll to specific values // scrollTo is the same window.scroll(( top: 2500, left: 0, behavior: 'smooth' )); // Scroll certain amounts from current position window.scrollBy(( top: 100, // could be negative value left: 0, behavior: 'smooth' )); // Scroll to a certain element document.querySelector('.hello').scrollIntoView(( behavior: 'smooth' ));Dustan Kastennek erre van polifillje. Ehhez valószínűleg csak akkor nyúlna, ha valamit csinálna az oldal görgetésével, amit nem lehetne megtenni a #target jump linkekkel és a CSS-sel.
A sima görgetés elérhetősége
Bármilyen technológiát is használjon a gördülékeny görgetéshez, a hozzáférhetőség gondot jelent. Például, ha egy #hashlinkre kattint, akkor a böngésző natív viselkedése az, hogy a fókuszt az azonosítónak megfelelő elemre változtassa. Lehet, hogy az oldal görget, de a görgetés a fókuszváltozás mellékhatása.
Ha felülbírálja az alapértelmezett fókuszváltási viselkedést (amit meg kell tennie, hogy megakadályozza az azonnali görgetést és lehetővé tegye a gördülékeny görgetést), akkor a fókuszváltást magának kell kezelnie .
Heather Migliorisi erről a kódmegoldásokkal a Smooth Scrolling and Accessibility cikkben írt.
Sima görgetés a jQuery segítségével
A jQuery is megteheti. Itt van a kód, amellyel gördülékenyen görgethet egy lap horgonyára ugyanazon az oldalon. Van némi logika beépítve az ugró linkek azonosítására, és nem céloz meg más linkeket.
// Select all links with hashes $('a(href*="#")') // Remove links that don't actually link to anything .not('(href="#")') .not('(href="#0")') .click(function(event) ( // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) ( // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('(name=' + this.hash.slice(1) + ')'); // Does a scroll target exist? if (target.length) ( // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate(( scrollTop: target.offset().top ), 1000, function() ( // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) ( // Checking if the target was focused return false; ) else ( $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again ); )); ) ) ));Lásd: Chris Coyier (@chriscoyier) toll sima oldalgörgetése a jQuery-ben a CodePen-en.
Ha használta ezt a kódot, és mindannyian olyanok vagytok, mint HÉ, MI A KÉK Vázlatok?