👭 🥂 ✉️ النوافذ مشروط التي نستحقها 👩🏻‍🤝‍👨🏼 🛩️ 🍪

لنبدأ

في معايير مختلفة وتتضح الجودة ، يوجد عنصر مثل حظر تمرير الصفحة عند فتح نافذة مشروطة. نافذة مشروط يعني التفاعل فقط معها.

سيطرح الكثيرون السؤال التالي: "لماذا لا تستخدم الحلول الجاهزة؟". المشكلة هي أن هذه الوظيفة إما لم يتم تنفيذها على الإطلاق ، أو يتم تنفيذها بشكل سيء للغاية. يمكنك استخدام الحل الأبسط والأسوأ:

.body { overflow: hidden;}

هنا نحصل على ارتعاش بسيط في الصفحة. كود . تجدر الإشارة إلى: المشكلة تحدث فقط عندما يتم التمرير على الصفحة ، على سبيل المثال ، في Safari لا توجد مثل هذه المشكلة.

مشكلة الرسوم المتحركة (GIF)

تقدم بعض الحلول في المساحات المفتوحة npm استبدال التمرير بمسافة بادئة أو كتلة تم تصميمها كتمرير (شريط رمادي بسيط) ، والكثير من السحر ، لكنها لا تعمل على حل المشكلة.

سنقوم بتعديل الرمز الأولي قليلاً ويعمل كل شيء:

 .body { position:fixed; overflow-y: scroll; }

الآن ظهرت مشكلة أخرى: الصفحة تقفز. كود . الحل من خلال js بسيط: عند فتح الصفحة ، نأخذ القيمة التي يتم تمرير الصفحة إليها وتعيين هذه القيمة إلى أعلى خاصية لعلامة <body> Code .

 function getBodyScrollTop() { return self.pageYOffset || (document.documentElement && document.documentElement.ScrollTop) || (document.body && document.body.scrollTop); } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() //    body.style.top = `-${body.dataset.scrollY}px` modal.classList.add('modal--open') body.classList.add('body-lock') }) closeModalButton.addEventListener('click', e => { e.preventDefault() modal.classList.remove('modal--open') body.classList.remove('body-lock') window.scrollTo(0, body.dataset.scrollY) //  ,   })

في بعض الأحيان على الموقع ، قد تكون هناك صفحة تحتوي على القليل من المحتوى وعدم التمرير ، ولكن عندما تفتح نافذة مشروطة ، فإن الكود الخاص بنا يضيفها. دعونا تعديل التمرير قليلا. حل جاهز .

 function existVerticalScroll() { return document.body.offsetHeight > window.innerHeight } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() modal.classList.add('modal--open') if(existVerticalScroll()) { //   body.classList.add('body-lock') body.style.top = `-${body.dataset.scrollY}px` } }) closeModalButton.addEventListener('click', e => { e.preventDefault() modal.classList.remove('modal--open') if(existVerticalScroll()) { //   body.classList.remove('body-lock') window.scrollTo(0,body.dataset.scrollY) } })

توفر

إذا كنت لا تفكر في ذلك ، فستكون هناك حركة محتملة باستخدام علامة تبويب خارج نافذة الوسائط. على gif ، فقط اضغط على Tab عدة مرات.

مشكلة الرسوم المتحركة (GIF)

على الإنترنت ، لا يوجد حل بسيط لهذه المشكلة ، وكتابة دراجة العكازات الخاصة بك ليست عقلانية للغاية عندما توجد مكتبة focus-trap.js . هنا ، كشف المؤلف بمزيد من التفصيل عن موضوع المكتبات ومشكلاتها .

 //     const modalFocusTrap = createFocusTrap(".modal"); //      openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() modal.classList.add('modal--open') modalFocusTrap.activate(); //  .   if(existVerticalScroll()) { body.classList.add('body-lock') body.style.top = `-${body.dataset.scrollY}px` } }) closeModalButton.addEventListener('click', e => { e.preventDefault() modal.classList.remove('modal--open') modalFocusTrap.deactivate(); //  .   if(existVerticalScroll()) { body.classList.remove('body-lock') window.scrollTo(0,body.dataset.scrollY) } })

النتائج

حتى إذا كان هناك العديد من الإطارات مشروط على الصفحة ، يمكنك التفاف جميع التعليمات البرمجية في وظيفة واحدة وتمرير اسم الفئة من نافذة مشروط.

 function initModal(className) { // ,        } initModal('modalName1') initModal('modalName2')

المشكلة من النظرة الأولى بسيطة ، لكن هناك لحظات كثيرة غير واضحة. أعتقد أن هذه المقالة سوف تساعدك على صنع نوافذ مشروطية أفضل. كود جاهز

النوافذ مشروط التي نستحقها

لنبدأ

توفر

النتائج

مواد مفيدة

More articles: