في الآونة الأخيرة، يحتوي الحساب العام لشركة التطوير H5 على وظيفة التمرير إلى الأعلى من خلال النقر على الأيقونة. الوظيفة سهلة التنفيذ نسبيًا، ما عليك سوى الاتصال بـ window.scrollTo(0, 0) مباشرة وإكمالها في سطر واحد من التعليمات البرمجية. ولكن كأسد حصار، كيف يمكن أن يكون لدي مثل هذه المتطلبات المنخفضة لنفسي، لذلك أضفت مطلبًا لنفسي لتحقيق وظيفة تمرير الصفحة بسلاسة إلى الأعلى. بعد البحث ومراجعة المستندات، لدينا الخيارات الثلاثة التالية.
1. استخدم CSSيمكن تحقيق أعلى مستوى من الوظائف باستخدام CSS فقط. الرمز هو كما يلي:
html {سلوك التمرير: سلس؛}تتمثل وظيفة هذا النمط في تحديد سلوك التمرير للعناصر التي تحتوي على أشرطة التمرير، ولكنه يصبح ساري المفعول فقط عندما يتنقل المستخدم يدويًا أو عندما تقوم واجهة برمجة التطبيقات للتمرير CSSOM بتشغيل التمرير، ولا يؤثر على التمرير الناتج عن سلوك المستخدم. عندما كنت أحتفل، فتحت هل يمكنني الاستخدام وتحققت من التوافق:
اللعنة، دعونا ننفذها باستخدام JS.
2. استخدم Window.scrollTo APIنعلم جميعًا أن window.scrollTo(x, y) يحقق وظيفة التمرير إلى موضع معين على الصفحة عن طريق تمرير إحداثيات المحور x وy في المستند. في الواقع، يمكن لواجهة برمجة التطبيقات هذه أيضًا تمرير خيار، وهو كائن، حيث تتوافق القيمة اليسرى مع x في الإحداثيات، وتتوافق القيمة العليا مع y في الإحداثيات، وهناك أيضًا قيمة سلوك، مما يسمح لك بذلك. لتخصيص سلوك التمرير ثم نقوم بتنفيذ التمرير مثل هذا إلى الأعلى:
window.scrollTo({ يسار: 0، أعلى: 0، السلوك: 'ناعم'})رائحتها طيبة جدًا، انتهيت. وبعد بضعة أيام، جاءني مدير المنتج بسيف طوله 5 أمتار، وقال إن تأثير التمرير على Safari كان غريبًا وأن الفحص البدني كان سيئًا للغاية. لذلك فتحت مستند MDN بصمت وانتقلت إلى الأسفل:
عند رؤية هذه الصورة، على الرغم من أن متصفح API مدعوم تقريبًا، فإن خيار الخيار معلق مباشرة على Safari، لذلك قمت بفتح Stackoverflow مرة أخرى ولخصت الحل النهائي.
3. استخدم requestAnimationFrameكثيرًا ما أرى إطار requestAnimationFrame الشهير، لكن لم تسنح لي الفرصة لاستخدامه هذه المرة. نحن نعلم أن وظيفة requestAnimationFrame هي إخبار المتصفح بتنفيذ وظيفة رد الاتصال الواردة قبل إعادة الرسم التالية، ويتم هذا السلوك تلقائيًا بواسطة المتصفح نيابةً عنك. لذلك لدينا الكود التالي:
constscrollToTop = () => { LetscrollTop = document.documentElement.scrollTo || document.body.scrollTop if (scrollTop > 0) { window.requestAnimationFrame(scrollTop) window.scrollTop(0,scrollTop -scrollTo / 8) }}منتهي! ! ! ممتاز! ! ! بينما كنت متحمسًا، قمت بتشغيل هل يمكنني استخدامه للتحقق من توافق requestAnimationFrame:
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.