M

MLOG

O'zbek

Silliq va qulay navigatsiya uchun CSS scroll-behavior'ni o'zlashtiring. Muvaffaqiyatli foydalanuvchi tajribasi uchun joriy etish usullari, brauzer mosligi va ilg'or sozlamalarni o'rganing.

CSS Scroll Behavior: Silliq aylantirish bo'yicha to'liq qo'llanma

Bugungi veb-dasturlash olamida foydalanuvchi tajribasi (UX) eng muhim o'rinni egallaydi. UXga sezilarli ta'sir ko'rsatishi mumkin bo'lgan kichik bir detal — bu aylantirishning silliqligidir. Bo'limlar o'rtasida keskin sakrashlar endi yo'q! CSS'ning scroll-behavior xususiyati silliq aylantirishni amalga oshirishning oddiy, ammo kuchli usulini taklif etadi, bu veb-saytning qulayligini va foydalanuvchilarning umumiy qoniqishini oshiradi. Ushbu qo'llanma scroll-behavior xususiyatini to'liq o'rganishni ta'minlaydi, unda asosiy amalga oshirishdan tortib, ilg'or sozlash va brauzer mosligi masalalarigacha, haqiqiy global auditoriya uchun barcha jihatlar qamrab olingan.

CSS Scroll Behavior nima?

CSS'dagi scroll-behavior xususiyati aylantirish qutisi uchun aylantirish harakatini belgilashga imkon beradi. Standart holatda, aylantirish bir lahzada sodir bo'ladi, bu esa sahifaning turli qismlari o'rtasida harakatlanayotganda keskin sakrashlarga olib keladi. scroll-behavior: smooth; buni o'zgartiradi va langar havolasini bosish, strelka tugmalaridan foydalanish yoki dasturiy ravishda aylantirishni boshlash orqali silliq, animatsiyalangan o'tishni ta'minlaydi.

scroll-behavior: smooth; ning asosiy qo'llanilishi

Silliq aylantirishni yoqishning eng oddiy usuli — scroll-behavior: smooth; xususiyatini html yoki body elementiga qo'llashdir. Bu ko'rish maydonidagi barcha aylantirishlarni silliq qiladi.

html elementiga qo'llash:

Bu odatda afzal ko'rilgan usul, chunki u butun sahifaning aylantirish harakatiga ta'sir qiladi.

html {
  scroll-behavior: smooth;
}

body elementiga qo'llash:

Bu usul ham ishlaydi, lekin kamroq qo'llaniladi, chunki u faqat body ichidagi kontentga ta'sir qiladi.

body {
  scroll-behavior: smooth;
}

Misol: Sarlavhalar bilan belgilangan bir nechta bo'limlarga ega oddiy veb-sahifani tasavvur qiling. Foydalanuvchi ushbu bo'limlardan biriga ishora qiluvchi navigatsiya havolasini bosganda, sahifa darhol o'sha bo'limga sakrash o'rniga, unga silliq ravishda aylanadi.

Langar havolalari bilan silliq aylantirish

Langar havolalari (shuningdek, fragment identifikatorlari deb ham ataladi) veb-sahifa ichida harakatlanishning keng tarqalgan usulidir. Ular odatda mundarijalarda yoki bir sahifali veb-saytlarda ishlatiladi. scroll-behavior: smooth; bilan langar havolasini bosish silliq aylantirish animatsiyasini ishga tushiradi.

Langar havolalari uchun HTML tuzilmasi:





  
1-bo'lim

  
1-bo'limning tarkibi...






  
2-bo'lim

  
2-bo'limning tarkibi...






  
3-bo'lim

  
3-bo'limning tarkibi...

html { scroll-behavior: smooth; } CSS qoidasi o'rnatilganida, navigatsiyadagi har qanday havolani bosish mos keladigan bo'limga silliq aylantirish animatsiyasiga olib keladi.

Maxsus aylantiriladigan elementlarni nishonga olish

Shuningdek, scroll-behavior: smooth; xususiyatini overflow: auto; yoki overflow: scroll; ga ega bo'lgan divlar kabi maxsus aylantiriladigan elementlarga ham qo'llashingiz mumkin. Bu sahifaning qolgan qismiga ta'sir qilmasdan, ma'lum bir konteyner ichida silliq aylantirishni yoqish imkonini beradi.

Misol: Div ichida silliq aylantirish:


  
Bu yerda ko'p kontent bor...

  
Yana kontent...

  
Yana ham ko'proq kontent...




.scrollable-container {
  width: 300px;
  height: 200px;
  overflow: scroll;
  scroll-behavior: smooth;
}

Ushbu misolda faqat .scrollable-container ichidagi kontent silliq aylanadi.

JavaScript bilan dasturiy silliq aylantirish

scroll-behavior: smooth; foydalanuvchi o'zaro ta'siri (masalan, langar havolalarini bosish) natijasida yuzaga keladigan aylantirishni boshqargan holda, sizga JavaScript yordamida dasturiy ravishda aylantirishni boshlash kerak bo'lishi mumkin. scrollTo() va scrollBy() metodlari behavior: 'smooth' opsiyasi bilan birgalikda bunga erishish usulini taqdim etadi.

scrollTo() dan foydalanish:

scrollTo() metodi oynani ma'lum bir koordinataga aylantiradi.

window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

Ushbu kod oynani yuqoridan 500 piksellik vertikal masofaga silliq aylantiradi.

scrollBy() dan foydalanish:

scrollBy() metodi oynani belgilangan miqdorda aylantiradi.

window.scrollBy({
  top: 100,
  left: 0,
  behavior: 'smooth'
});

Ushbu kod oynani 100 piksel pastga silliq aylantiradi.

Misol: Tugmani bosish orqali elementga silliq aylantirish:





  
3-bo'lim

  
3-bo'limning tarkibi...




const scrollButton = document.getElementById('scrollButton');
const section3 = document.getElementById('section3');

scrollButton.addEventListener('click', () => {
  section3.scrollIntoView({
    behavior: 'smooth'
  });
});

Tugma bosilganda, sahifa scrollIntoView() yordamida "3-bo'lim" elementiga silliq aylanadi. Bu usul ko'pincha afzal ko'riladi, chunki u dinamik kontent o'zgarishlaridan qat'i nazar, nishon elementning aniq pozitsiyasini hisoblab chiqadi.

Aylantirish tezligi va ravonligini sozlash

scroll-behavior: smooth; standart silliq aylantirish animatsiyasini taqdim etsa-da, siz faqat CSS yordamida tezlikni yoki ravonlikni (animatsiyaning vaqt o'tishi bilan o'zgarish darajasi) to'g'ridan-to'g'ri boshqara olmaysiz. Sozlash uchun JavaScript talab qilinadi.

Muhim eslatma: Haddan tashqari uzun yoki murakkab animatsiyalar UX uchun zararli bo'lishi, harakat kasalligini keltirib chiqarishi yoki foydalanuvchi o'zaro ta'siriga xalaqit berishi mumkin. Nozik va samarali animatsiyalarga intiling.

JavaScript asosidagi sozlash:

Aylantirish tezligi va ravonligini sozlash uchun siz JavaScript yordamida maxsus animatsiya yaratishingiz kerak. Bu odatda GSAP (GreenSock Animation Platform) kabi kutubxonalardan foydalanishni yoki requestAnimationFrame yordamida o'z animatsiya mantig'ingizni amalga oshirishni o'z ichiga oladi.

requestAnimationFrame yordamida misol:

function smoothScroll(target, duration) {
  const start = window.pageYOffset;
  const targetPosition = target.getBoundingClientRect().top;
  const startTime = performance.now();

  function animation(currentTime) {
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, start, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  // Ravonlik funksiyasi (masalan, easeInOutQuad)
  function ease(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// Foydalanish misoli:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // millisekund
smoothScroll(targetElement, scrollDuration);

Ushbu kod nishon element va davomiylikni kirish sifatida qabul qiladigan smoothScroll funksiyasini belgilaydi. U silliq animatsiya yaratish uchun requestAnimationFrame dan foydalanadi va animatsiya sur'atini boshqarish uchun ravonlik funksiyasini (bu misolda easeInOutQuad) o'z ichiga oladi. Turli animatsiya effektlariga erishish uchun onlaynda ko'plab turli xil ravonlik funksiyalarini topishingiz mumkin.

Qulaylik (Accessibility) jihatlari

Silliq aylantirish UX'ni yaxshilashi mumkin bo'lsa-da, qulaylikni hisobga olish juda muhimdir. Ba'zi foydalanuvchilar silliq aylantirishni chalg'ituvchi yoki hatto chalkashtiruvchi deb topishlari mumkin. Inklyuzivlik uchun silliq aylantirishni o'chirish imkoniyatini taqdim etish zarur.

Foydalanuvchi afzalliklarini amalga oshirish:

Eng yaxshi yondashuv — foydalanuvchining operatsion tizimidagi kamaytirilgan harakat afzalliklarini hurmat qilish. prefers-reduced-motion kabi media so'rovlari foydalanuvchi o'z tizim sozlamalarida kamaytirilgan harakatni so'raganligini aniqlashga imkon beradi.

prefers-reduced-motion dan foydalanish:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important; /* Silliq aylantirishni bekor qilish */
  }
}

Ushbu kod, agar foydalanuvchi o'z operatsion tizimida "harakatni kamaytirish" sozlamasini yoqgan bo'lsa, silliq aylantirishni o'chiradi. !important bayrog'i ushbu qoida boshqa scroll-behavior e'lonlarini bekor qilishini ta'minlash uchun ishlatiladi.

Qo'lda almashtirgichni taqdim etish:

Shuningdek, foydalanuvchilarga silliq aylantirishni yoqish yoki o'chirish imkonini beruvchi qo'lda almashtirgich (masalan, belgilash katakchasi) taqdim etishingiz mumkin. Bu foydalanuvchilarga o'z tajribalari ustidan ko'proq nazorat beradi.



const smoothScrollToggle = document.getElementById('smoothScrollToggle');

smoothScrollToggle.addEventListener('change', () => {
  if (smoothScrollToggle.checked) {
    document.documentElement.style.scrollBehavior = 'smooth';
  } else {
    document.documentElement.style.scrollBehavior = 'auto';
  }
});

Ushbu kod foydalanuvchilarga silliq aylantirishni yoqish yoki o'chirish imkonini beruvchi belgilash katakchasini qo'shadi. Sessiyalar davomida eslab qolinishi uchun ushbu foydalanuvchi afzalligini saqlab qo'yishni (masalan, lokal saqlash omboridan foydalanish) unutmang.

Brauzer mosligi

scroll-behavior yaxshi brauzer qo'llab-quvvatlashiga ega, ammo uni qo'llab-quvvatlamaydigan eski brauzerlardan xabardor bo'lish muhimdir. Mana brauzer mosligi haqida qisqacha ma'lumot:

Eski brauzerlar uchun zaxira yechim taqdim etish:

scroll-behavior ni qo'llab-quvvatlamaydigan brauzerlar uchun siz JavaScript polifillidan foydalanishingiz mumkin. Polifill — bu eski brauzerlarda yangi funksiyaning imkoniyatlarini ta'minlaydigan kod qismidir.

Misol: Polifilldan foydalanish:

Silliq aylantirish polifillarini taqdim etadigan bir nechta JavaScript kutubxonalari mavjud. Bir variant — "smoothscroll-polyfill" kabi kutubxonadan foydalanish.

Ushbu kod "smoothscroll-polyfill" kutubxonasini o'z ichiga oladi va uni ishga tushiradi. Bu scroll-behavior ni tabiiy ravishda qo'llab-quvvatlamaydigan eski brauzerlarda silliq aylantirish funksiyasini ta'minlaydi.

Shartli yuklash: Zamonaviy brauzerlarda keraksiz yuklamalarni oldini olish uchun polifillni skript yuklovchi yoki funksiyani aniqlash yordamida shartli ravishda yuklashni o'ylab ko'ring.

Silliq aylantirish uchun eng yaxshi amaliyotlar

Silliq aylantirishni amalga oshirishda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

Umumiy muammolar va yechimlar

Silliq aylantirishni amalga oshirishda duch kelishingiz mumkin bo'lgan ba'zi umumiy muammolar va ularning yechimlari:

Ilg'or uslublar va mulohazalar

Asoslardan tashqari, silliq aylantirishni amalga oshirishni yaxshilash uchun bir nechta ilg'or uslublar va mulohazalar mavjud.

scroll-margin va scroll-padding dan foydalanish:

Ushbu CSS xususiyatlari aylantirishni yopishtirish harakati ustidan yanada nozik nazoratni ta'minlaydi va kontentning qotirilgan sarlavhalar yoki pastki qismlar tomonidan yashirilishini oldini olishga yordam beradi.

Misol:

section {
  scroll-margin-top: 20px; /* Aylantirishda har bir bo'lim ustiga 20px chet qo'shadi */
}

html {
  scroll-padding-top: 60px; /* Aylantirishda ko'rish maydonining yuqori qismiga 60px ichki bo'shliq qo'shadi */
}

Intersection Observer API bilan birlashtirish:

Intersection Observer API element ko'rish maydoniga kirganda yoki chiqqanda aniqlashga imkon beradi. Siz ushbu API'dan elementlarning ko'rinishiga asoslanib silliq aylantirish animatsiyalarini ishga tushirish uchun foydalanishingiz mumkin.

Misol:

const sections = document.querySelectorAll('section');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Bo'lim ko'rinishda bo'lganda biror narsa qiling
      console.log('Bo\'lim ' + entry.target.id + ' ko\'rinishda');
    } else {
      // Bo'lim ko'rinishdan chiqqanda biror narsa qiling
      console.log('Bo\'lim ' + entry.target.id + ' ko\'rinishdan tashqarida');
    }
  });
}, {
  threshold: 0.5 // Elementning 50% ko'ringanda ishga tushirish
});

sections.forEach(section => {
  observer.observe(section);
});

Ushbu kod har bir bo'lim ko'rish maydoniga kirganda yoki chiqqanda aniqlash uchun Intersection Observer API'dan foydalanadi. Keyin siz bu ma'lumotlardan maxsus silliq aylantirish animatsiyalari yoki boshqa vizual effektlarni ishga tushirish uchun foydalanishingiz mumkin.

Aylantirish harakatiga global nuqtai nazarlar

Silliq aylantirishning texnik amalga oshirilishi global miqyosda bir xil bo'lib qolsa-da, madaniy va kontekstual mulohazalar uning qabul qilingan foydaliligiga ta'sir qilishi mumkin.

Xulosa

scroll-behavior: smooth; veb-saytingizning foydalanuvchi tajribasini sezilarli darajada yaxshilaydigan qimmatli CSS xususiyatidir. Uning asosiy amalga oshirilishini, sozlash imkoniyatlarini, qulaylik jihatlarini va brauzer mosligini tushunib, siz butun dunyo bo'ylab foydalanuvchilar uchun uzluksiz va yoqimli ko'rish tajribasini yaratishingiz mumkin. Silliq aylantirishni amalga oshirish barcha foydalanuvchilaringizning ehtiyojlarini qondirishini ta'minlash uchun qulaylikka ustunlik berishni, ishlash samaradorligini optimallashtirishni va sinchkovlik bilan sinovdan o'tkazishni unutmang. Ushbu qo'llanmada keltirilgan ko'rsatmalar va eng yaxshi amaliyotlarga rioya qilish orqali siz silliq aylantirishni o'zlashtirishingiz va global auditoriya uchun ham vizual jozibador, ham foydalanuvchiga qulay veb-sayt yaratishingiz mumkin.