ইউপিডি: আমি একটি এনপিএম প্যাকেজ তৈরি করেছি যা নিম্নলিখিত সমাধানের থেকে আরও কার্যকর এবং সহজে ব্যবহারযোগ্য।
আমার স্মুথস্ক্রোল ফাংশন
আমি স্টিভ ব্যান্টনের দুর্দান্ত সমাধান নিয়েছি এবং একটি ফাংশন লিখেছি যা এটি ব্যবহার করা আরও সুবিধাজনক করে তুলেছে। আমি আগে যেমন চেষ্টা করেছি ঠিক window.scroll()তেমনি ব্যবহার করা এমনকি window.scrollBy()সহজতরও হবে তবে এই দু'জনের কিছু সমস্যা রয়েছে:
- এগুলি একটি মসৃণ আচরণের সাথে ব্যবহার করার পরে সবকিছু জঞ্জাল হয়ে যায়।
- আপনি এগুলি যে কোনও উপায়ে আটকাতে পারবেন না এবং স্ক্রোলটির এবং তার আগে পর্যন্ত অপেক্ষা করতে হবে। সুতরাং আমি আশা করি আমার কাজটি আপনার জন্য কার্যকর হবে। এছাড়াও, একটি হালকা ওজনের পলিফিল রয়েছে যা এটি সাফারি এবং এমনকি আইইতে কাজ করে।
কোডটি এখানে
কেবল এটি অনুলিপি করুন এবং আপনি কখন চান তা নিয়ে গণ্ডগোল করুন।
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। এমডিএন আরও পড়ুন ।
অবশেষে
আপনার প্রয়োজন অনুসারে স্মুথস্ক্রোল ফাংশন সামঞ্জস্য করুন।
উদাহরণস্বরূপ, যদি আপনার কিছু স্থির শিরোনাম থাকে (বা আমি এটি শব্দটি দিয়ে ডাকি masthead) আপনি এটির মতো কিছু করতে পারেন:
const mastheadEl = document.querySelector(someMastheadSelector);
const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;
আপনার যদি এ জাতীয় মামলা না থাকে তবে কেবল এটি মুছুন, কেন নয় :-D।
scrollIntoViewবিরক্তিকর।