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;
}

            

              
                Copy
              
            
          

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;
}

            

              
                Copy
              
            
          

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...


            

              
                Copy
              
            
          

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...


            

              
                Copy
              
            
          

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

            

              
                Copy
              
            
          

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'
});

            

              
                Copy
              
            
          

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'
});

            

              
                Copy
              
            
          

Ushbu kod oynani 100 piksel pastga silliq aylantiradi.

Misol: Tugmani bosish orqali elementga silliq aylantirish:

            3-bo'limga o'tish


  
3-bo'lim
  
3-bo'limning tarkibi...


            

              
                Copy
              
            
          

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

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

            

              
                Copy
              
            
          

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);

            

              
                Copy
              
            
          

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 */
  }
}

            

              
                Copy
              
            
          

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.

            
  
  Silliq aylantirishni yoqish


            

              
                Copy
              
            
          

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

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

            

              
                Copy
              
            
          

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:

• Chrome: 61-versiyadan boshlab qo'llab-quvvatlanadi
• Firefox: 36-versiyadan boshlab qo'llab-quvvatlanadi
• Safari: 14.1-versiyadan boshlab qo'llab-quvvatlanadi (avvalgi versiyalarda qisman qo'llab-quvvatlash)
• Edge: 79-versiyadan boshlab qo'llab-quvvatlanadi
• Opera: 48-versiyadan boshlab qo'llab-quvvatlanadi
• Internet Explorer: Qo'llab-quvvatlanmaydi

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.

            


            

              
                Copy
              
            
          

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:

• Nozik bo'ling: Chalg'ituvchi yoki harakat kasalligiga olib kelishi mumkin bo'lgan haddan tashqari uzun yoki murakkab animatsiyalardan saqlaning.
• Qulaylikni hisobga oling: Agar foydalanuvchilar uni chalkashtiruvchi deb bilsalar, silliq aylantirishni o'chirish imkoniyatini taqdim eting. Foydalanuvchining kamaytirilgan harakat afzalliklarini hurmat qiling.
• Turli qurilmalarda sinab ko'ring: Silliq aylantirish turli qurilmalar va ekran o'lchamlarida yaxshi ishlashiga ishonch hosil qiling.
• Ishlash samaradorligini optimallashtiring: Silliq aylantirish animatsiyalarini haddan tashqari ko'p ishga tushirishdan saqlaning, chunki bu ishlash samaradorligiga ta'sir qilishi mumkin.
• Mazmunli langar havolalaridan foydalaning: Langar havolalari sahifadagi aniq belgilangan bo'limlarga ishora qilishiga ishonch hosil qiling.
• Bir-biriga yopishgan kontentdan saqlaning: Qotirilgan sarlavhalar yoki aylantirish nishonini yopib qo'yishi mumkin bo'lgan boshqa elementlarga e'tibor bering. Aylantirish pozitsiyasini moslashtirish uchun scroll-padding-top kabi CSS xususiyatlaridan yoki JavaScriptdan foydalaning.

Umumiy muammolar va yechimlar

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

• Muammo: Silliq aylantirish ishlamayapti.
  • Yechim: scroll-behavior: smooth; ning html yoki body elementiga qo'llanilganligini ikki marta tekshiring. Langar havolalari mos keladigan bo'limlarga to'g'ri ishora qilayotganiga ishonch hosil qiling. scroll-behavior xususiyatini bekor qiladigan ziddiyatli CSS qoidalari yo'qligini tekshiring.
• Muammo: Silliq aylantirish juda sekin yoki juda tez.
  • Yechim: "Aylantirish tezligi va ravonligini sozlash" bo'limida tavsiflanganidek, JavaScript yordamida aylantirish tezligini sozlang. Silliqlik va sezgirlik o'rtasidagi to'g'ri muvozanatni topish uchun turli ravonlik funksiyalari bilan tajriba qiling.
• Muammo: Qotirilgan sarlavha aylantirish nishonini yopib qo'yapti.
  • Yechim: CSS'dagi scroll-padding-top xususiyatidan foydalanib, aylantirish konteynerining yuqori qismiga bo'sh joy qo'shing. Shu bilan bir qatorda, qotirilgan sarlavhaning balandligini hisoblash va aylantirish pozitsiyasini moslashtirish uchun JavaScriptdan foydalaning.
• Muammo: Silliq aylantirish boshqa JavaScript funksiyalariga xalaqit beryapti.
  • Yechim: JavaScript kodingiz silliq aylantirish animatsiyasi bilan ziddiyatga kirmasligiga ishonch hosil qiling. Turli JavaScript funksiyalarining bajarilishini muvofiqlashtirish uchun hodisa tinglovchilari va qayta chaqiruvlardan foydalaning.

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.

• scroll-margin: Aylantirishni yopishtirish maydoni atrofidagi chetni belgilaydi.
• scroll-padding: Aylantirishni yopishtirish maydoni atrofidagi ichki bo'shliqni belgilaydi.

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 */
}

            

              
                Copy
              
            
          

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);
});

            

              
                Copy
              
            
          

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.

• Internet tezligi: Internet aloqasi sekinroq bo'lgan hududlarda maxsus animatsiyalar uchun katta JavaScript kutubxonalari yuklanish vaqtlariga va UX'ga salbiy ta'sir ko'rsatishi mumkin. Yengil yechimlarga va shartli yuklashga ustunlik bering.
• Qurilma imkoniyatlari: Yuqori darajadagi kompyuterlardan tortib, quvvati past mobil telefonlargacha bo'lgan keng turdagi qurilmalar uchun optimallashtiring. Turli qurilmalar va ekran o'lchamlarida sinchkovlik bilan sinab ko'ring.
• Qulaylik standartlari: Nogironligi bo'lgan foydalanuvchilar uchun inklyuzivlikni ta'minlash uchun WCAG (Web Content Accessibility Guidelines) kabi xalqaro qulaylik standartlariga rioya qiling.
• Foydalanuvchi kutishlari: Silliq aylantirish odatda yaxshi qabul qilinsa-da, animatsiya va harakatga oid foydalanuvchi kutishlaridagi potentsial madaniy farqlarni yodda tuting. Fikr-mulohazalarni to'plash uchun turli foydalanuvchi guruhlari bilan sinovdan o'tkazing.

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.