UPD: मैंने एक npm पैकेज बनाया है जो निम्न समाधान से बेहतर काम करता है और उपयोग में आसान है।
मेरी स्मूथसक्रोल फ़ंक्शन
मैंने स्टीव बैंटन का अद्भुत समाधान निकाला है और एक फ़ंक्शन लिखा है जो इसे उपयोग करने के लिए अधिक सुविधाजनक बनाता है। जैसा कि मैंने पहले भी आजमाया है, वैसे ही इसका इस्तेमाल करना आसान होगा window.scroll()या हो सकता है window.scrollBy(), लेकिन इन दोनों में कुछ समस्याएं हैं:
- एक सहज व्यवहार के साथ उनका उपयोग करने के बाद सब कुछ कबाड़ हो जाता है।
- आप उन्हें किसी भी तरह से रोक नहीं सकते हैं और स्क्रॉल तक और इंतजार करना पड़ता है। इसलिए मुझे उम्मीद है कि मेरा कार्य आपके लिए उपयोगी होगा। इसके अलावा, एक हल्का पॉलीफ़िल है जो इसे सफारी और यहां तक कि 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;
यदि आपके पास ऐसा कोई मामला नहीं है, तो इसे हटा दें, क्यों नहीं :-D।
scrollIntoViewपरेशान कर रही है।