ما معنى خطأ scroll behavior smooth is not supported by safari في CSS؟

المشكلة تحدث لأن  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();

مثلما أشار المدرب عمر، فإن رسالة التنبيه تظهر بسبب ان خاصية 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>