اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

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

 

  • 0
نشر

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

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...