مرحبا المطورين! لقد اكتشفت هذا أثناء العمل على تطبيق تدوين الملاحظات الخاص بي.
إليك منشورًا باستخدام تطبيقي.
مشاركة التقدم على X (تويتر)

هل سبق لك أن تفاجأت بأن CSS لا يعمل بالطريقة التي توقعتها؟
لقد حدث ذلك لي (مرة أخرى) عندما قمت بتعيين عنصر ليتم تثبيته في الأسفل ثم فتحت لوحة المفاتيح على جهاز iPhone الخاص بي.

ما رأيته هو أن هذا العنصر غير مرئي على الإطلاق.
لأنه ثابت. إلى الأسفل. خلف لوحة المفاتيح.

يبدو أننا بحاجة إلى بعض JS لإصلاح المشكلة.

VisualViewport

هناك واجهة برمجة تطبيقات للمتصفح تتمتع بدعم جيد يمكن استخدامها لهذه الأغراض: VisualViewport.
تقوم بإرجاع العرض والارتفاع لإطار العرض المرئي الفعلي. رابط MDN إلى المستندات.
ومع ذلك، قم بإجراء التحقيق الخاص بك لمعرفة ما إذا كان مدعومًا للإصدارات التي تستهدفها.

الرياضيات

في الأساس، نحتاج إلى التعامل مع موضع العنصر فيما يتعلق بإطار العرض المرئي، بالإضافة إلى موضع التمرير وارتفاع العنصر. دعونا نفعل الرياضيات.

أيضًا، نظرًا لأن الرياضيات أبسط بكثير بهذه الطريقة، فمن المنطقي استخدام المعلمة العلوية بدلاً من المعلمة السفلية.

top = viewport height   scroll - element height

تطبيق

سأستخدم React. بالنسبة لأي إطار عمل آخر، يمكنك فقط نسخ محتوى الخطاف useEffect.

import { useEffect, useState } from 'react';
import classNames from 'classnames';
import { useDebounce } from 'use-debounce';

const elementHeight = 55; // elem. height in pixels
// It's also a good idea to calculate it dynamically via ref

export const FixedBlock = () => {
  // top postion -> the most important math result goes here
  const [top, setTop] = useState(0);

  useEffect(() => {
    function resizeHandler() {
      // viewport height
      const viewportHeight = window.visualViewport?.height ?? 0;
      // math
      setTop(viewportHeight   window.scrollY - elementHeight)
    }

    // run first time to initialize 
    resizeHandler();

    // subscribe to events which affect scroll, or viewport position
    window.visualViewport?.addEventListener('resize', resizeHandler);
    window.visualViewport?.addEventListener('scroll', resizeHandler);
    window?.addEventListener('touchmove', resizeHandler);

    // unsubscribe
    return () => {
      window.visualViewport?.removeEventListener('resize', resizeHandler);
      window.visualViewport?.removeEventListener('scroll', resizeHandler);
      window?.removeEventListener('touchmove', resizeHandler);
    };
  }, [debouncedScroll]);

  return (
    
      

        I am fixed
      
    >
  );
};

النتائج النهائية

كنت بحاجة أيضًا إلى إضافة بعض الرسوم المتحركة وإخفاء الكتلة الخاصة بي عند التمرير، ولكن ليس عليك القيام بذلك، وستكون مرئية دائمًا.