UPD : 다음 솔루션보다 더 잘 작동하고 사용하기 쉬운 npm 패키지 를 만들었습니다 .
내 smoothScroll 기능
저는 Steve Banton의 멋진 솔루션을 가져와 사용하기 더 편리하게 만드는 함수를 작성했습니다. 그냥 사용하기 쉬운 것 window.scroll()또는 window.scrollBy()내가 전에 해봤지만,이 두 몇 가지 문제를 가지고 :
- 부드러운 동작으로 사용하면 모든 것이 쓰레기가됩니다.
- 어쨌든 그들을 막을 수는 없으며 두루마리가 나올 때까지 기다려야합니다. 그래서 내 기능이 당신에게 유용하기를 바랍니다. 또한 Safari 및 IE에서도 작동 하는 경량 폴리 필 이 있습니다.
다음은 코드입니다.
그냥 복사하고 원하는대로 엉망으로 만드십시오.
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));
};
링크 요소를 만들려면 다음 데이터 속성을 추가하십시오.
data-smooth-scroll-to="element-id"
또한 다른 속성을 추가로 설정할 수 있습니다.
data-smooth-scroll-block="center"
기능 의 block옵션을 나타냅니다 scrollIntoView(). 기본적으로 start. MDN 에 대해 자세히 알아보십시오 .
드디어
필요에 따라 smoothScroll 기능을 조정하십시오.
예를 들어, 고정 된 헤더가있는 경우 (또는라는 단어로 호출 masthead) 다음과 같이 할 수 있습니다.
const mastheadEl = document.querySelector(someMastheadSelector);
// and add it's height to the EXTRA_OFFSET variable
const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;
그런 경우가 없으면 삭제하십시오.
scrollIntoView이 문제입니다.