React-window: تحريك .scrollTo () / .scrollToIndex () ❓

شكرا!

نعم ، يمكنك فعل شيء مثل هذا: https://codesandbox.io/s/k2lpl9m0l3

شكرا لك ، هذا يساعد!

سيكون هذا أفضل ، لكنه لا يعمل مع جميع المتصفحات (ولكن هناك تعبئة متعددة ):

...
import { findDOMNode } from 'react-dom'

class MyScroller extends React.Component {
   list = React.createRef()
 scrollToAnimated(index) {
  const el = findDOMNode(this.list.current)
  if (el) {
    el.scrollTo({
     behavior: 'smooth',
     left: index * itemWidth
    })
  }
 }

 render() {
   return <List ref={this.list} ... />
 }
}

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

يبدو أن وضع الحماية في هذا المثال قد تم حذفه ، هل لديك آخر؟

Sandbox لا يزال هناك.

نعم ، آسف ، لقد ظهر بطريقة ما على أنه محذوف على FF ولكنه جيد على Chrome ، ربما من الإضافات الخاصة بي

يسهل القيام بذلك باستخدام outerRef التي تمنحك مرجعًا إلى عنصر div القابل للتمرير.

يمكنك بعد ذلك استخدام ذلك مع واجهة برمجة التطبيقات القياسية

لذلك سيكون هناك شيء على غرار هذا:

export default VirtualizedList extends React.Component {
   constructor() {
     this.listRef = React.createRef();
     this.scrollableContainerRef = React.createRef();
   }

  scrollTo(scrollOffset) {
    // note that my list is vertical which is why I am feeding this to the "top" prop.
    this.scrollableContainerRef.current.scrollTo({ 
      left: 0, 
      top: scrollOffset,
      behavior: 'smooth',
    });
  }

  render() {
    <List 
      ref={this.listRef}
      outerRef={this.scrollableContainerRef}
      layout="vertical"
      ...
  }
}

ملاحظة: لقد أزلت جميع الأكواد والدعائم الدخيلة أعلاه لإبقاء الأمور مختصرة.

scrollTo

كيف ستفعل هذا داخل مكون وظيفي؟ لدي بالفعل متغيرات من وإلى الموضع ، وأنا أحاول أن أجعل القائمة تنتقل من PositionA (التمرير الحالي) إلى PositionB (الموضع الذي حددته). أواجه مشكلة في الحصول على scrollTo (scrollOffset) {للعمل حيث يُظهر بناء الجملة خطأً عند استخدامه في المكون الوظيفي الخاص بي. أرغب في تشغيل سلوك التمرير عند تغيير جزء معين من الحالة.

غير مختبرة:

function MyComp() {
    const listOuterRef = useRef(null)

    const scrollTo = useCallback((scrollOffset) => {
        listOuterRef.current?.scrollTo({ 
          left: 0, 
          top: scrollOffset,
          behavior: 'smooth',
        });
    }, [])


    return <List outerRef={listOuterRef} ... />
}

إذا كنت تريد أن تكون خياليًا:

function useSmoothScroll() {
    const listOuterRef = useRef(null)

    const scrollTo = useCallback((scrollOffset) => {
        listOuterRef.current?.scrollTo({ 
          left: 0, 
          top: scrollOffset,
          behavior: 'smooth',
        });
    }, [])
    return {
        scrollableRef: listOuterRef,   
        scrollTo
     }
}
function MyComp() {
    const { scrollableRef, scrollTo } =  useSmoothScroll()
    // use scrollTo() in a useEffect or onClick
    return <List outerRef={scrollableRef} ... />
}

غير مختبرة:

function MyComp() {
    const listOuterRef = useRef(null)

    const scrollTo = useCallback((scrollOffset) => {
        listOuterRef.current?.scrollTo({ 
          left: 0, 
          top: scrollOffset,
          behavior: 'smooth',
        });
    }, [])


    return <List outerRef={listOuterRef} ... />
}

إذا كنت تريد أن تكون خياليًا:

function useSmoothScroll() {
    const listOuterRef = useRef(null)

    const scrollTo = useCallback((scrollOffset) => {
        listOuterRef.current?.scrollTo({ 
          left: 0, 
          top: scrollOffset,
          behavior: 'smooth',
        });
    }, [])
    return {
        scrollableRef: listOuterRef,   
        scrollTo
     }
}
function MyComp() {
    const { scrollableRef, scrollTo } =  useSmoothScroll()
    // use scrollTo() in a useEffect or onClick
    return <List outerRef={scrollableRef} ... />
}

شكرا جزيلا على الرد على هذا. لقد أمضيت ساعات لا تحصى في البحث عن حل ممكن وهذا ساعدني كثيرًا. حصلت على التمرير العمل بفضل مساعدتكم! لسوء الحظ ، فإن التنفيذ الخاص بي بطيء جدًا مع نافذة التفاعل ، لذلك اضطررت للعودة إلى القائمة الافتراضية للتفاعل وهي تعمل بشكل أفضل فيما أفعله. ومع ذلك ، لا يوجد ExternalRef في رد الفعل الافتراضي ، ولا يمكنني معرفة أي طريقة ممكنة لتعيين مرجع لـ div القابل للتمرير هناك ، لذلك لا يمكنني تحريك التمرير بهذه الطريقة باستخدام رد الفعل الافتراضي.

هل لديك أي فكرة كيف يمكن لشيء كهذا من خلال التفاعل الافتراضي باستخدام القائمة؟

يوفر jquery وظيفة تمرير متحركة سهلة مع العديد من الخيارات لضبط السلوك.
يمكنك تحويل الجزء الخارجي إلى عنصر مسج ثم استدعاء وظيفة الحركة عليه.
https://api.jquery.com/animate/

كود مزيف:

const listOuterRef = useRef();

useEffect(() => {
 $(listOuterRef.current).animate(
    {
      scrollTop: 100,
    },
    {
      duration: 500,
      // other options can be passed to customize animation behavior such as easing, callbacks, etc
    },
  );
});

return <List outerRef={listOuterRef}>...</List>;

يبدو أن jquery أقل استخدامًا في عالم React ، ولكنه رائع لأي سيناريو تحتاج فيه إلى قراءة / كتابة DOM مباشرة. بالتأكيد يجب أن تستخدم باعتدال بالرغم من ذلك. لأنه يمكن أن يقوض بسهولة الهدف الكامل من استخدام React في المقام الأول.

فقط أضف إلى الأنماط العامة أو أنماط المكون الخاصة بك:

.List {scroll-behavior: smooth;}

IMHO ، الحل الأبسط والأكثر أناقة ، لا أفهم لماذا لم يقترحه أحد