محمود سعداوي2 نشر 15 يونيو 2022 أرسل تقرير نشر 15 يونيو 2022 السلام عليكم. كيف يمكن إصلاح الخطأ التالي في css علما و أنّ هذا الخطأ ليس له أيّ تأثير على النتيجة. شكرا. 2 اقتباس
0 عمر قره محمد نشر 15 يونيو 2022 أرسل تقرير نشر 15 يونيو 2022 المشكلة تحدث لأن IE/Edge/Safari لا يدعمون الخاصية scroll-behavior: smooth بشكل كامل ولحل هذه المشكلة في Safari وكل المتصفحات الاخرى يمكنك إضافة الخاصية عبر باستخدام js : function SmoothVerticalScrolling(e, time, where) { var eTop = e.getBoundingClientRect().top; var eAmt = eTop / 100; var curTime = 0; while (curTime <= time) { window.setTimeout(SVS_B, curTime, eAmt, where); curTime += time / 100; } } function SVS_B(eAmt, where) { if(where == "center" || where == "") window.scrollBy(0, eAmt / 2); if (where == "top") window.scrollBy(0, eAmt); } حيث تضيف الخاصية للعنصر الخاص بك عبر استدعاء هذه الوظيفة بالشكل التالي : SmoothVerticalScrolling(myelement, 275, "center"); وفي حال تريد إضافتها لل body : const myElement = document.body; فتصبح الوظيفة الخاصة بإضافة smooth للـ body كالتالي : function SmoothVerticalScrolling(e, time, where) { var eTop = e.getBoundingClientRect().top; var eAmt = eTop / 100; var curTime = 0; while (curTime <= time) { window.setTimeout(SVS_B, curTime, eAmt, where); curTime += time / 100; } } function SVS_B(eAmt, where) { if(where == "center" || where == "") window.scrollBy(0, eAmt / 2); if (where == "top") window.scrollBy(0, eAmt); } const myElement = document.body; SmoothVerticalScrolling(myElement, 275, "center"); وفي حال أردت إضافت الخاصية نفسها للدحرجة الجانبية أي لليمين واليسار يمكنك كذلك فعل نفس الامر بالـ js باستخدام الوظيفة التالية: function SmoothHorizontalScrolling(e, time, amount, start) { var eAmt = amount / 100; var curTime = 0; var scrollCounter = 0; while (curTime <= time) { window.setTimeout(SHS_B, curTime, e, scrollCounter, eAmt, start); curTime += time / 100; scrollCounter++; } } function SHS_B(e, sc, eAmt, start) { e.scrollLeft = (eAmt * sc) + start; } وكذلك الامر هنالك مكتبة جاهزة للقيام بنفس الأمر وهي smootscroll polyfill : يمكنك تحميلها في ملف المشروع عبر الامر npm install smoothscroll-polyfill --save وإضافتها للصفحة عبر الكود التالي : import smoothscroll from 'smoothscroll-polyfill'; // kick off the polyfill! smoothscroll.polyfill(); 1 اقتباس
0 Adnane Kadri نشر 15 يونيو 2022 أرسل تقرير نشر 15 يونيو 2022 مثلما أشار المدرب عمر، فإن رسالة التنبيه تظهر بسبب ان خاصية scroll-behavior غير مدعومة من قبل متصفحات safari. ولتجاوز هذا المشكل ومقاربة نفس سلوك الانزلاق في هاته المتصفحات التي لا تدعم هاته الخاصية نقوم بعمل ذلك عن طريق الجافاسكربت. في جيكويري مثلا يوجد الخاصية scrollTop ضمن التابع animate : $('html, body').animate({ scrollTop: $('#target-item').offset().top }, 800}) حيث يعبر : target-item على معرف id للعنصر او الحاوي المستهدف الذي نحاول الانزلاق اليه. 800 مدة هاته الحركية. او مدة الانزلاق يمكنك مثلا اضافة هاته الشيفرة ضمن وظيفة ما نربطها بحدث الضغط على رابط او زر ما يقوم بالانزلاق بنا الى عنصر آخر. <script> function smothlyScroll(target) { $('html, body').animate({ scrollTop: $(target).offset().top }, 800}) } </script> <button onclick="smothlyScroll('#about-section')">scroll to about section</button> <section id="about-section"> .. </section> 1 اقتباس
السؤال
محمود سعداوي2
السلام عليكم.
كيف يمكن إصلاح الخطأ التالي في css
علما و أنّ هذا الخطأ ليس له أيّ تأثير على النتيجة.
شكرا.
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.