UPD: j'ai créé un package npm qui fonctionne mieux que la solution suivante et plus facile à utiliser.
Ma fonction smoothScroll
J'ai pris la merveilleuse solution de Steve Banton et écrit une fonction qui la rend plus pratique à utiliser. Ce serait plus facile à utiliser window.scroll()ou même window.scrollBy(), comme je l'ai déjà essayé, mais ces deux-là ont quelques problèmes:
- Tout devient junky après les avoir utilisés avec un comportement fluide.
- Vous ne pouvez pas les empêcher de toute façon et devez attendre le et du rouleau. J'espère donc que ma fonction vous sera utile. En outre, il existe un polyfill léger qui le permet de fonctionner dans Safari et même IE.
Voici le code
Copiez-le et dérangez-le comme vous le souhaitez.
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
const prepareSmoothScroll = linkEl => {
const EXTRA_OFFSET = 0;
const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
const blockOption = linkEl.dataset.smoothScrollBlock || 'start';
if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
const anchorEl = document.createElement('div');
destinationEl.setAttribute('style', 'position: relative;');
anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);
destinationEl.appendChild(anchorEl);
linkEl.addEventListener('click', () => {
anchorEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
if (blockOption === 'center' || !EXTRA_OFFSET) {
linkEl.addEventListener('click', () => {
destinationEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
};
export const activateSmoothScroll = () => {
const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];
linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};
Pour créer un élément de lien, ajoutez simplement l'attribut de données suivant:
data-smooth-scroll-to="element-id"
Vous pouvez également définir un autre attribut comme addtion
data-smooth-scroll-block="center"
Il représente l' blockoption de la scrollIntoView()fonction. Par défaut, c'eststart . En savoir plus sur MDN .
finalement
Adaptez la fonction smoothScroll à vos besoins.
Par exemple, si vous avez un en-tête fixe (ou je l'appelle avec le mot masthead), vous pouvez faire quelque chose comme ceci:
const mastheadEl = document.querySelector(someMastheadSelector);
// and add it's height to the EXTRA_OFFSET variable
const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;
Si vous n'avez pas un tel cas, supprimez-le, pourquoi pas :-D.
scrollIntoViewest troublant.