স্ন্যাপ ইভেন্ট স্ক্রোল করুন

অ্যাডাম আর্গিল
Adam Argyle
X GitHub

Chrome 129 থেকে আপনি JavaScript থেকে scrollSnapChange এবং scrollSnapChanging ইভেন্ট ব্যবহার করতে পারেন। বিল্ট-ইন স্ন্যাপ ইভেন্টগুলি বাস্তবায়নের মাধ্যমে, পূর্বে অদৃশ্য স্ন্যাপ স্টেটটি কার্যকর হবে, সঠিক সময়ে এবং সর্বদা সঠিক। এই ইভেন্টগুলি ছাড়া এটি আপনার সুবিধাজনক নয়।

ব্রাউজার সমর্থন

  • ক্রোম: 129।
  • প্রান্ত: 129।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: সমর্থিত নয়।

উৎস

ব্রাউজার সমর্থন

  • ক্রোম: 129।
  • প্রান্ত: 129।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: সমর্থিত নয়।

উৎস

scrollSnapChange এর আগে, স্ক্রোল পোর্টে কোন উপাদানটি অতিক্রম করছে তা খুঁজে বের করার জন্য আপনি একটি ইন্টারসেকশন পর্যবেক্ষক ব্যবহার করতে পারেন, কিন্তু কি স্ন্যাপ করা হয়েছে তা নির্ধারণ করা কয়েকটি পরিস্থিতিতে সীমাবদ্ধ ছিল। উদাহরণস্বরূপ, স্ন্যাপ আইটেমগুলি স্ক্রোল পোর্টটি পূরণ করে বা স্ক্রোল পোর্টের বেশিরভাগ অংশ পূরণ করে কিনা তা আপনি সনাক্ত করতে পারেন৷ এটি করার জন্য আপনি স্ক্রোল এলাকার ছেদকারী উপাদানগুলি পর্যবেক্ষণ করবেন, তারপর কোন আইটেমটি স্ক্রোল এলাকার বেশিরভাগ অংশ গ্রাস করছে তার উপর ভিত্তি করে, ধরে নিন এটি স্ন্যাপ টার্গেট ছিল, তারপর scrollend জন্য অপেক্ষা করুন এবং স্ন্যাপ করা আইটেমটির উপর কাজ করুন (স্ন্যাপ লক্ষ্য) .

scrollSnapChanging আগে, স্ন্যাপ টার্গেট কখন পরিবর্তিত হচ্ছে বা এটি কী পরিবর্তন করা হচ্ছে (যেমন একটি স্ক্রল ফ্লিং দেওয়া হয়েছে) তা জানা অসম্ভব ছিল।

একটি অনুভূমিক স্ক্রলারটি স্ন্যাপ লক্ষ্য হিসাবে ভিতরে নম্বরযুক্ত বাক্স সহ দেখানো হয়। বাম দিকে স্ক্রোলস্ন্যাপচেঞ্জ ইভেন্টের একটি বাস্তব সময়ের লগ, নীল রঙের সাথে স্ন্যাপটার্গেটইনলাইন হাইলাইট করে। ডানদিকে স্ক্রোলস্ন্যাপচ্যাঞ্জিং ইভেন্টের একটি রিয়েল টাইম লগ, স্ন্যাপটার্গেটইনলাইনকে ধূসর রঙে হাইলাইট করে।

চেষ্টা করে দেখুন
https://codepen.io/web-dot-dev/pen/jOjaaEP

দুর্দান্ত খবর, এই নতুন ইভেন্টগুলি এই তথ্যগুলিকে দ্রুত এবং সহজে উপলব্ধ করে৷ এটি তাদের বর্তমান ক্ষমতার বাইরে পৌঁছানোর জন্য স্ক্রোল স্ন্যাপ ইন্টারঅ্যাকশনগুলিকে আনলক করে এবং স্ক্রল স্ন্যাপ সম্পর্ক এবং নতুন UI প্রতিক্রিয়া পরিস্থিতির অর্কেস্ট্রেশন সক্ষম করে৷

scrollSnapChange

এই ইভেন্টটি তখনই চালু হয় যখন একটি স্ক্রোল অঙ্গভঙ্গির ফলে একটি নতুন স্ন্যাপ টার্গেট বিশ্রাম দেওয়া হয়, এবং নিম্নলিখিত ক্রমে

  1. স্ক্রোলটি বিশ্রাম নেওয়ার পরে।
  2. scrollend আগে।

এই ইভেন্টটি scrollend ঠিক আগে শুরু হয়, যখন স্ক্রলিং সম্পূর্ণ হয়, এবং শুধুমাত্র যদি একটি নতুন স্ন্যাপ টার্গেট বিশ্রাম দেওয়া হয়। স্ক্রোল অঙ্গভঙ্গি সম্পূর্ণ হয়ে গেলে এটি ইভেন্টটিকে অলস বা ঠিক সময়ে অনুভব করে।

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

ইভেন্টটি ইভেন্ট অবজেক্টে স্ন্যাপ করা আইটেমটিকে snapTargetBlock এবং snapTargetInline হিসাবে প্রকাশ করে। স্ক্রোলারটি শুধুমাত্র অনুভূমিক হলে, snapTargetBlock বৈশিষ্ট্যটি null হবে। সম্পত্তির মান হবে এলিমেন্ট নোড।

স্ক্রোল স্ন্যাপচেঞ্জের জন্য অনন্য বিবরণ

ব্যবহারকারী তাদের অঙ্গভঙ্গি প্রকাশ না করা পর্যন্ত ফায়ার করে না

স্ক্রীনে স্থির একটি আঙুল বা একটি ট্র্যাকপ্যাডে আঙ্গুলগুলি নির্দেশ করে যে ব্যবহারকারীর অঙ্গভঙ্গি স্ক্রোল করা শেষ হয়নি, যার অর্থ স্ক্রোল শেষ হয়নি, যার মানে স্ন্যাপ লক্ষ্য এখনও পরিবর্তিত হয়নি, এটি একটি সম্পূর্ণ ব্যবহারকারীর অঙ্গভঙ্গি মুলতুবি রয়েছে৷

স্ন্যাপ লক্ষ্য পরিবর্তন না হলে ফায়ার করে না

ইভেন্টটি স্ন্যাপ পরিবর্তনের জন্য, এবং যদি স্ন্যাপ টার্গেট পরিবর্তন না হয়, তাহলে ইভেন্টটি চালু হবে না, এমনকি যদি স্ক্রলারটি একজন ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করে থাকে। যদিও ব্যবহারকারী প্রকৃতপক্ষে স্ক্রোল করেছেন, তাই স্ক্রোল সমাপ্তির পরেও scrollend ইভেন্টটি জ্বলছে।

scrollSnapChanging

ব্রাউজার সিদ্ধান্ত নেওয়ার সাথে সাথেই এই ইভেন্টটি চালু হয়ে যায় যে স্ক্রোল অঙ্গভঙ্গিতে একটি নতুন স্ন্যাপ টার্গেট আছে বা হবে। এটা সাগ্রহে আগুন, এবং স্ক্রলিং সময়.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

ইভেন্টটি ইভেন্ট অবজেক্টে স্ন্যাপ করা আইটেমটিকে snapTargetBlock এবং snapTargetInline হিসাবে প্রকাশ করে। স্ক্রোলারটি শুধুমাত্র উল্লম্ব হলে, snapTargetInline প্রপার্টিটি null হবে। সম্পত্তির মান হবে এলিমেন্ট নোড।

স্ক্রোল স্ন্যাপ চেঞ্জিংয়ের জন্য অনন্য বিবরণ

একটি স্ক্রোল অঙ্গভঙ্গি সময় তাড়াতাড়ি এবং প্রায়ই আগুন

scrollSnapChange বিপরীতে যা একটি সম্পূর্ণ ব্যবহারকারীর স্ক্রোল অঙ্গভঙ্গির জন্য অপেক্ষা করছে, এই ইভেন্টটি সাগ্রহে ফায়ার হবে যখন একজন ব্যবহারকারী তাদের আঙুল দিয়ে স্ক্রোল করবে বা একটি ট্র্যাকপ্যাড ব্যবহার করবে। একজন ব্যবহারকারীকে বিবেচনা করুন যিনি আঙুল না তুলে ধীরে ধীরে স্ক্রোল করছেন, যতক্ষণ ব্যবহারকারী একাধিক সম্ভাব্য স্ন্যাপ লক্ষ্যে প্যান করছেন ততক্ষণ পর্যন্ত scrollSnapChanging অঙ্গভঙ্গির সময় একাধিকবার ফায়ার করবে। প্রতিবার ব্যবহারকারী স্ক্রোল করে, যদি ব্রাউজার নির্ধারণ করে থাকে যে মুক্তির পরে এটি একটি নতুন স্ন্যাপ টার্গেটের উপর নির্ভর করবে, ইভেন্টটি আপনাকে জানাতে শুরু করে যে এটি কোন উপাদান।

একটি নতুন স্ন্যাপ লক্ষ্যে যাওয়ার পথে সমস্ত স্ন্যাপ লক্ষ্যগুলিকে ফায়ার করে না

উপরন্তু, একটি ফ্লিং বিবেচনা করুন, যেখানে একজন ব্যবহারকারী একটি স্ক্রোল থ্রো অঙ্গভঙ্গি করে যা একবারে একাধিক স্ন্যাপ লক্ষ্যকে বিস্তৃত করে; এই ঘটনাটি লক্ষ্যমাত্রার সাথে একবার গুলি চালাবে যেটির উপর বিশ্রাম নেওয়া হবে। তাই এটি আগ্রহী কিন্তু অপব্যয় নয়, যত তাড়াতাড়ি সম্ভব আপনাকে স্ন্যাপ টার্গেট সরবরাহ করে।

কেস এবং উদাহরণ ব্যবহার করুন

এই ইভেন্টগুলি অনেকগুলি নতুন ব্যবহারের ক্ষেত্রে সক্ষম করে এবং বর্তমান নিদর্শনগুলিকে বাস্তবায়ন করা আরও সহজ করে তোলে। একটি প্রধান উদাহরণ হল স্ন্যাপ ট্রিগার করা অ্যানিমেশন সক্ষম করা। প্রাসঙ্গিকভাবে স্ন্যাপ আইটেম, স্ন্যাপ আইটেমের সন্তান বা সংশ্লিষ্ট তথ্য প্রকাশ করা যখন এটি স্ন্যাপ টার্গেট হয়।

নিম্নলিখিত নিদর্শনগুলি আপনাকে সরাসরি উত্পাদনশীল হতে সাহায্য করার জন্য কিছু ব্যবহারের ক্ষেত্রে প্রদর্শন করে।

একটি প্রশংসাপত্র হাইলাইট করুন

এই উদাহরণটি স্ন্যাপ করা প্রশংসাপত্রকে প্রচার করে বা দৃশ্যত ফোকাস করে।

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}
https://codepen.io/web-dot-dev/pen/dyBZZPe

স্ন্যাপ করা আইটেমের জন্য ক্যাপশন দেখান

এই উদাহরণটি স্ন্যাপ করা আইটেমের ক্যাপশন দেখায়। উভয় ইভেন্ট এই ডেমোতে অন্তর্ভুক্ত করা হয়েছে, যাতে আপনি scrollSnapChange এবং scrollSnapChanging মধ্যে সময় এবং ব্যবহারকারীর অভিজ্ঞতার পার্থক্য দেখতে পারেন।

স্ন্যাপ পরিবর্তন
https://codepen.io/web-dot-dev/pen/wvLPPBL

স্ন্যাপ পরিবর্তন
https://codepen.io/web-dot-dev/pen/QWXOObw

একবার অ্যানিমেট করুন, একটি snapped উপস্থাপনা স্লাইড শিশুদের

এই উদাহরণটি জানে যে কখন একটি নতুন স্লাইড অবতরণ করা হয়েছে এবং বিশ্রাম নেওয়া হয়েছে, যা একবার বিষয়বস্তু অ্যানিমেট করার জন্য একটি দুর্দান্ত সময়।

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})
https://codepen.io/web-dot-dev/pen/rNEYYVj

একটি স্ক্রলারে x এবং y উভয়েই স্ন্যাপিং

স্ক্রোল স্ন্যাপ স্ক্রলারদের জন্য কাজ করে যা অনুভূমিক এবং উল্লম্ব স্ক্রল করার অনুমতি দেয়। আপনি গ্রিডের চারপাশে স্ক্রোল করার সাথে সাথে এই ডেমোটি scrollSnapChanging এবং scrollSnapChange লক্ষ্য উভয়ই দেখায়। এই ডেমোটি আলোকিত করে যে ব্রাউজারটি যে উপাদানটি স্ন্যাপ করছে তা সবসময় আপনার মনে হয় নাও হতে পারে।

একটি অনুভূমিক এবং উল্লম্ব স্ক্রলারে বর্গক্ষেত্রের একটি গ্রিড দেখানো হয়েছে। ড্যাশ করা সীমানা স্ক্রোলস্ন্যাপচ্যাঞ্জিং লক্ষ্যকে প্রতিনিধিত্ব করে এবং কঠিন সীমানাটি হল স্ক্রোলস্ন্যাপচ্যাঞ্জিং লক্ষ্য। লাল snapTargetInline প্রতিনিধিত্ব করে, এবং নীল snapTargetBlock প্রতিনিধিত্ব করে।

https://codepen.io/web-dot-dev/pen/qBzVVdp

দুটি লিঙ্কযুক্ত স্ক্রোলার

এই ডেমোতে দুটি স্ক্রল স্ন্যাপিং কন্টেইনার রয়েছে যেখানে একটি লিঙ্কের একটি উচ্চ স্তরের তালিকা এবং অন্যটি প্রকৃত পৃষ্ঠাযুক্ত সামগ্রী৷ নতুন scrollSnapChanging ইভেন্টটি এই দ্বি-দিকগুলির স্ন্যাপ স্টেটগুলিকে লিঙ্ক করা তুচ্ছ করে তোলে যাতে তারা সর্বদা সিঙ্কে থাকে৷

https://codepen.io/web-dot-dev/pen/YzoEEXj

OKLCH কালার পিকার

এই ডেমোতে 3টি স্ক্রোলার রয়েছে, প্রতিটি OKLCH- এ একটি ভিন্ন রঙের চ্যানেল উপস্থাপন করে। স্ন্যাপ করা আইটেমটি তার প্রাসঙ্গিক রেডিও গ্রুপের সাথে সিঙ্ক্রোনাইজ করা হয় এবং ইনপুটগুলি মোড়ানো ফর্ম থেকে ডেটা পুনরুদ্ধার করা যেতে পারে। একটি মাউস বা স্পর্শ ব্যবহারকারীর কাছে, আপনি আপনার পছন্দের মানটিতে স্ক্রোল করতে পারেন। কীবোর্ড ব্যবহারকারীদের জন্য, আপনি ট্যাব এবং তীর কী ব্যবহার করতে পারেন। একজন স্ক্রিন রিডারের জন্য, এটা একটা ফর্ম মাত্র।

scrollSnapChanging ব্যবহার করা হয় স্ন্যাপ করা আইটেমটিকে রাজ্যের সাথে সিঙ্ক্রোনাইজ করার জন্য, যখন স্ক্রোলস্ন্যাপচেঞ্জ ব্যবহার করা হয় প্রভাবিত রঙের চ্যানেল শিরোনামটিকে অ্যানিমেট করতে যেটিতে ব্যবহারকারীর ইনপুট প্রয়োগ করা হয়েছিল।

https://codepen.io/web-dot-dev/pen/OJeOOVG

স্ন্যাপিং বিস্ময়কর অ্যানিমেটেড হাব

এই ডেমোটি scrollsnapchange ব্যবহার করে স্ন্যাপ ট্রিগারড ট্রানজিশন সহ স্ক্রোল স্ন্যাপিং অভিজ্ঞতাকে ধীরে ধীরে উন্নত করে।

নিম্নলিখিত জাভাস্ক্রিপ্টের সাথে ইভেন্ট সমর্থনের জন্য পরীক্ষা করুন:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}
https://codepen.io/web-dot-dev/pen/MWMOOae

স্ক্রোলযোগ্য শাসক ইনপুট

এই ডেমোতে একটি সংখ্যা ইনপুটের জন্য একটি দৈর্ঘ্য বাছাই করার বিকল্প উপায় হিসাবে একটি স্ক্রোলযোগ্য রুলার রয়েছে। সংখ্যা ইনপুটে সরাসরি মান লিখুন বা আকারে স্ক্রোল করুন। পরিবর্তন ইভেন্টটি ব্যবহারকারীর অঙ্গভঙ্গির সময় নির্বাচন পরিষ্কার করতে ব্যবহৃত হয়, যখন পরিবর্তন ইভেন্টটি অবস্থা আপডেট করতে এবং ব্যবহারকারীর পছন্দকে শক্তিশালী করতে ব্যবহৃত হয়।

https://codepen.io/web-dot-dev/pen/LYKOOpd

কভার প্রবাহ

এই ডেমোটি Bramus Van Damme-এর বিখ্যাত macOS কভার ফ্লো ( ভিডিও টিউটোরিয়ালও ) এর চমৎকার স্ক্রোল চালিত অ্যানিমেশন বিনোদনের উপর ভিত্তি করে তৈরি করেছে। অনন্যভাবে, অ্যালবামের শিরোনাম লুকানোর জন্য scrollSnapChanging ব্যবহার করা হয় এবং শিরোনাম উপস্থাপন করতে scrollSnapChange ব্যবহার করা হয়। ইভেন্টগুলি পুরানো শিরোনাম এবং নতুনের একটি অলস উপস্থাপনাকে আড়াল করতে সাহায্য করে৷

https://codepen.io/web-dot-dev/pen/Bagmmog

কিছু সৃজনশীলতা অনুপ্রাণিত করার জন্য আরো ধারণা

এখন কোন উপাদানটি স্ন্যাপ করা হবে এবং কোনটি সক্রিয়ভাবে স্ন্যাপ করা হবে তা জানা তুচ্ছ, অনেক নতুন সম্ভাবনা রয়েছে! সৃজনশীলতা এবং অতিরিক্ত ব্যবহারের ক্ষেত্রে অনুপ্রাণিত করতে সাহায্য করার জন্য এখানে ধারণাগুলির একটি তালিকা রয়েছে:

  • অলস লোডিংকে ট্রিগার করা, যা স্ন্যাপচেঞ্জ ট্রিগারড রেন্ডারিং বা ডেটা ফেচিং নামে পরিচিত।
  • ফিল্ম স্ট্রিপ থাম্বনেইল একটি বড় ইমেজ লিঙ্ক.
  • স্ন্যাপ করা ভিডিও থাম্বনেইলের জন্য একটি ভিডিও ট্রেলারের জন্য প্লে/পজ টগল করা হচ্ছে।
  • বিশ্লেষণ ট্র্যাকিং
  • স্ক্রোলিটেলিং
  • ফরচুন UI/UX এর চাকা
  • স্ন্যাপ লক্ষ্য একটি নোঙ্গর করা টুলটিপ পায়।
  • স্ন্যাপ করতে আলতো চাপুন
  • প্রকাশ করতে স্ন্যাপ করুন
  • স্ন্যাপ উপর শব্দ
  • UI সোয়াইপ করুন
  • সোয়াইপযোগ্য ট্যাব বা ক্যারোসেল

আরও পড়াশোনা

Chrome টিম এই নতুন APIগুলির সাথে আপনি কী তৈরি করেছেন তা শুনে উত্তেজিত এবং আশা করি এটি আপনার স্ক্রোলযোগ্য অভিজ্ঞতাগুলিকে প্রবাহিত করতে সহায়তা করবে৷

সম্পদ: