Onlarla necə mübarizə aparmaq olar -Rol

Əvvəla, niyə kitabla mübarizə aparmalısan?

Qısacası - çünki bəzən səhifə ilə bütün qarşılıqlı əlaqələrin qarşısını almaq məcburiyyətindəsiniz. Səhifə tamamilə məsuliyyətsiz olmalıdır. Bu qayda. Sadə qayda.

  • Bunun üzərinə vurmaq olmaz. Klikləmək olmur.
  • Fokusu hərəkət etdirin və ya düymələrə basın. İtmək olmur.
  • Gedin. Kaydırmaq olmur.

Yaxşı o zaman - NECƏ məsuliyyətsiz olmalıdır?

Səhifəyə odaklanmamalı olduğunuz zaman, sadəcə bir hissəsi.

Məsələn, modallar - ekranın mərkəzində üzən kiçik (və ya böyük) qutular. Səhifənin qalan hissəsi hətta boz rəngdə ola bilər, cos ...

Modal, çalışmalı olduğunuz yeganə şirkətdir.
Modal hər şeyi bloklayacaq, yəni https://atlaskit.atlassian.com/packages/core/modal-dialog

Maddə 11-dəki MDN Modal Dialoqun fokus idarəçiliyinə və düzgün aria atributlarına ehtiyac olduğunu vurğulamasına, lakin kaydırmayı maneə törətməməsinə bir az təəccübləndim.

İnert və ya Aria-Gizli vasitəsilə mətndən nitqə bloklama deyil, hazırda yalnız Reach-UI və Smooth-UI-də tətbiq olunur

Modalın səhifənin sürüşməsini niyə bloklaması lazım olduğu tamamilə aydın olmaya bilər. Gördüyünüz müddətdə sürüşmə yaxşı görünür.

Səhifəni aşağıya sürüşdürdüyünüzü başa düşərkən. Və bunu etmək istədiyin budur.

Kaydırmanın niyə bloklanmalı olduğunu izah edən başqa bir yaxşı nümunə Tam Ekran Modal Dialoq və ya “FocusedTask” dır. Bütün diqqətinizi cəlb edəcək bir şey.

Əslində - bu pis bir nümunədir (https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp)

Açıldıqdan sonra bütün ekran zəbt ediləcək və artıq əsas səhifənin məzmunu ilə əlaqə qura bilməyəcəksiniz. Ancaq onu gəzdirə bilərsiniz.

Daha çox ehtiyac var Ok - sizi səhifədən keçirən "onboarding" komponenti.

AtlasKit

Təsəvvür edək ki, səhifəni gəzdirə bilərsiniz. Və səhifəni gəzdirəcəksiniz. Və "spot lampalar" tükəndi. Və müştəriniz qismən deaktiv edilmiş tətbiqdə itir ...

Bir sürüşməni necə bloklaya bilərəm?

Oh! Bədəndə çox asandır - stil = "daşqın: gizli".

daşma: gizli sürüşmə çubuqlarını silir (gizlidirlər) və bu daşma rejimi kaydırılabilir olmadığı müddətdə sürüşdürmə blokları. CSS necə işləyir.

Hər şey hazırdır. Evə gedə bilərsən

Amma ... safari

Bəli - Mobil Safari-də işləmir.

Sürpriz!

  • Safari, bədənin üzərindəki daşqını görməməzlikdən gəlir və görüntünün arasından keçməyə imkan verir. Bunu yalnız həqiqi iPhone-da hiss edə bilərsiniz, Chrome emulyasiyasını yox.
  • Bu "toxunma ilə sürüşdürmə" bəzi etiketlər üçün sürüklə və burax hərəkətidir və bu yazıları sürüşdürə bilmədiyiniz təqdirdə, xüsusilə formalarla çox zəif işləyir.

İkinci problemin həlli sadədir - yalnız sürüşmə davranışını dəyişdirin:

> Bunu standart olaraq aktivləşdirmək istəyə bilərsiniz!

Və ilk problemin həlli də ... sadədir ... - event.preventDefault.

Yeganə problem - hansı elementi eşitmək və hansı hadisənin qarşısını almaq. Modal daxilindəki bütün hadisələr meydana gətirilməli, xaricdəki bütün hadisələr bloklanmalı və bütün bu hadisələr "ok-ish" elementlərindən "ok-ish" olmayan elementlərə keçə bilər.

Beləliklə - sürüşməyə səbəb ola biləcək hər hansı bir hadisə üçün bir şey hesablamalı, kaydırılabilirlik adlandırmalı və kaydırılmaması lazım olan bir şeydə gəzən bir hadisəni bloklamalısınız.

Deyərdim - bunun üçün xarici kitabxanalardan istifadə edin.

Nəticə

Beləliklə, masa üstü və Android brauzerlərində sürüşməni dayandırmaq və Safari'yi zəiflədən hadisələrin qarşısını almaq üçün Taşma: Bədəndə Gizli seçimini istifadə edin.

Asan?

Əslində yox, bir məqamı qaçırdıq. Sürüşmə çubuqları!

Sürüşmə çubuğunu öldürün!

Kaydırma yalnız sürüşmə çubuqları söndürüldükdə deaktiv edilir.

Sual - bir sürüşmə çubuğunuz var idi və indi onu sildiniz. Qaldı?

Kaydırma çubuqları itdi! Tamamilə!
Pəncərə maşınım yoxdur, bağışlayın

Nəticə 17 piksel geniş bir səhifə və bütün məzmununuz "çatladı". Bu parazitar və olduqca xoşagəlməz sinir təsirinə dözməyəcəyik.

Zərərsizləşdirmək asandır - sürüşmə çubuğunun gövdə üçün dolğunluq kimi qurulmuş genişliyinə diqqət yetirin.

Və son "bonus" işarəsi - gövdənin genişliyi ilə düzgün davranın: normal elementlər əvvəllər olduğu yerlərdə "düzgün" olmalıdır, yəni "boşluq" ilə, kiliddəki elementlər üçün "düzgün" isə pəncərənin sağ tərəfində olmalıdır olmalıdır.

Boşluğu dolduraraq düz doldurun.

Qeyd - Tamamilə yerləşdirilmiş elementlər pəncərə kənarına ilişir. İstədiyiniz bir şey ola bilər - elementi kənardan kənara göstərin. Ancaq bu elementlərin məzmununun "titrəyəcəyini" bilirsiniz və yəqin ki, bu sizin həqiqətən istədiyiniz deyil.

Boşluğu marginRight ilə doldurun.

Birinci (qırmızı) və üçüncü (adsız) elementlərin mövqelərini dəyişdirmədiklərini, ikinci (mövqe: sabit) kənarına bağlı qaldığını unutmayın. Düzəldilir - bədəni "düzəltdiyimiz" müddətcə - başqa hər hansı bir elementi düzəldə bilərik.

Yəqin ki, bu davranışa ehtiyacınız var.
Əyləncəli fakt - əksər kitabxanalar döşəmədən istifadə edirlər. Hər hansı bir fikir niyə?

Bu günlərdə yalnız bir kitabxana var (və üzr istəyirik - bu React-ə əsaslanır. İstədiyiniz zaman bölüşüb yığınınıza qoya bilərsiniz) bunu düzgün edən:

Daha bir nəticə

Maddənin sürüşməsinin qarşısını necə almaq olar :

  • Taşma əlavə edin: gövdə elementində gizlidir.
  • Safari üçün toxunma hadisələrini idarə edin.
  • Sürüşmə çubuğu arasındakı məsafəni saxlayın.

Əlavə bonus nöqtəsi: tam ekran kilidləri.

Düzünü desəm, 1-2-3 qədər asan deyil. Ətraflı şeytan detallarda. Zəhmət olmasa üçüncü tərəf kitabxanalarından istifadə edin - sizə kömək edəcəklər. Çoxlu! Həmişəki kimi.

Oxuyun

Kaydırma və sürüşmə haqqında daha çox oxuyun. Bu indiyə qədər olan ən yaxşı məqalədir.

Kaydırma / təkər / toxunma hadisələrini ləğv etmək haqqında daha çox məlumat əldə edin

Və məqalənin əvvəlində qeyd etdiyim, lakin düzgün izah etmədiyim "düzgün fokus idarəçiliyi" haqqında da unutmayın:

İstifadə edin

DOM (vanil JS)

Gövdə sürüşmə kilidi: 3 addımı da əhatə edir. Kompakt təklif. Bir gün həqiqi istehsal probleminə səbəb ola biləcək daxili kaydırılabilir bir elementə imkan verir. Yəqin ki, tövsiyə etməzdim, amma bu məqaləni bu kitabxana haqqında bir məqaləyə əsaslanaraq yazıram, buna görə də Body Scroll Lock'a təşəkkür edirəm.

Kaydırma Kilidi: İçəriyə sürüşdürülə bilən qablar da daxil olmaqla bütün 3 addımı əhatə edir və hər hansı bir ehtiyaca uyğun olaraq yapılandırılabilir. Bu kitabxanada cəmi bir neçə ️ var, lakin bir milyon dəyərindədir.

Dom-Locky: Yalnız "qarşısının alınması" addımlarını idarə edir, amma düzgün edir. Kaydırma çubuğunu özünüz idarə etdiniz və yalnız toxunma hadisələrini emal etməlisiniz. Bu kitabxanadan istifadə edin.

Reaksiya verin

React-Scroll-Locky: 3 addım üçün tam funksionallığı olan kitabxana. Yerləşmiş kilidləri, içəriyə sürüşdürülə bilən komponentləri dəstəkləyir və tamamilə qırılmazdır.

React-remove-scroll: scroll-locky-nin başqa bir versiyası, iki dəfə kiçik və React portallarının fərqindədir (ehtimal ki bu React üçün ən yaxşı seçimdir)

React-Scrolllock: 3 addım üçün tam funksiyalı kitabxana. Yuvalanmış qıfılları, içəriyə sürüşdürülə bilən komponentləri və portalları dəstəkləmir və gövdədə dolğu istifadə edir. Ancaq buna cavab olaraq özümün etdiyim müddətdə qeyd etməliyəm.

əlavə

Sürüşmə çubuqları qırılıb. Bu bir həqiqətdir. Beləliklə, onları deaktiv etməli olduğumuz zaman onları gizlətməliyik. Bütün brauzerlər onları idarə etməyə imkan vermir. Bütün brauzerlərdə bunlar yoxdur. Taleyini öz əlinə götür -