React-window: प्रतिक्रिया-विंडो के साथ कस्टम स्क्रॉलबार पर प्रतिक्रिया करें

यह पुस्तकालय और react-virtualized पूरी तरह से अलग कार्यान्वयन हैं। सामान्य तकनीकें जो आप react-virtualized मुद्दों पर देखते हैं, वे अक्सर उपयोगी संकेत प्रदान कर सकती हैं कि किसी चीज़ से कैसे संपर्क करें, लेकिन इस तरह के विशिष्ट कार्यान्वयन विवरण लागू नहीं होते हैं। ( react-virtualized , List Grid घटक को सजाता है। react-window वे बेहतर प्रदर्शन और आकार के लिए अलग घटक हैं।)

मुझे नहीं पता कि react-custom-scrollbar react-window साथ काम करेंगे क्योंकि मैंने कभी इसे आज़माया नहीं है। यह ऐसा कुछ नहीं है जिसे मैं ईमानदारी से समर्थन करने में दिलचस्पी रखता हूं, क्योंकि मुझे लगता है कि कस्टम स्क्रॉलबार आमतौर पर एक बुरा विचार है क्योंकि वे प्रदर्शन को कैसे प्रभावित करते हैं। इसलिए मैं इस मुद्दे को बंद करने जा रहा हूं।

लेकिन हम इस पर चैट करना जारी रख सकते हैं यदि आपके पास प्रश्नों का पालन हो तो chat

मैं इस बारे में कुछ पता लगाऊंगा, मुझे react-window का उपयोग करने में दिलचस्पी है क्योंकि यह हल्का है और मेरे मुद्दे को हल करता है। यहां तक ​​कि मुझे कस्टम स्क्रॉलबार का उपयोग करना पसंद नहीं है, लेकिन यह मेरे हाथ में नहीं है, हमें स्क्रॉलबार के लिए कस्टम डिज़ाइन की आवश्यकता है।

मैं सबसे खराब स्थिति में react-virtualized उपयोग करूंगा।
धन्यवाद :)

@ राहुल-सगोरे क्या आपने react-window साथ काम करने वाले कस्टम स्क्रॉलबार प्राप्त

नहीं, उसके लिए समय नहीं मिला। जांच और पता लगाने की जरूरत है।

यकीन नहीं होता अगर @bvaughn इसे मंजूरी देता है, लेकिन यह काम करने लगता है: https://codesandbox.io/s/00nw2w1jv

बेहतर दृष्टिकोण Scrollbars outerElementType रूप में पास करना होगा

const CustomScrollbars = ({ onScroll, forwardedRef, style, children }) => {
  const refSetter = useCallback(scrollbarsRef => {
    if (scrollbarsRef) {
      forwardedRef(scrollbarsRef.view);
    } else {
      forwardedRef(null);
    }
  }, []);

  return (
    <Scrollbars
      ref={refSetter}
      style={{ ...style, overflow: "hidden" }}
      onScroll={onScroll}
    >
      {children}
    </Scrollbars>
  );
};

const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
  <CustomScrollbars {...props} forwardedRef={ref} />
));

// ...

<FixedSizeList
  outerElementType={CustomScrollbarsVirtualList}
  {...rest}
/>

उदाहरण https://codesandbox.io/s/vmr1l0p463

मुझे लगता है कि outerElementType या innerElementType का उपयोग करके कितनी उन्नत चीजें संभव हैं

मैं प्रतिक्रिया-विंडो के नीचे स्क्रॉल स्थिति का पता लगाने की कोशिश कर रहा हूं।
क्या यह संभव है? क्या आपके पास इसके लिए कोई विचार है? मैं कोडैंडबॉक्स उदाहरण

आप scrollHeight @rufoot के लिए सूची पूछने के लिए उपलब्ध रेफरी प्रॉप्स का उपयोग करने में सक्षम होना चाहिए।

मैंने प्रॉपर में scrollHeight का उपयोग करने की कोशिश की है। लेकिन मुझे लगता है कि इसमें scrollHeight संपत्ति नहीं है।
@bvaughn क्या आपके पास इसके बारे में कोई विचार है?

https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/scrolling-to-a-list-item

scrollToRow200Auto = () => { this.listRef.current.scrollToItem(200); console.log("current position = ", this.listRef.current.props.scrollHeight) };

वर्तमान स्थिति = अपरिभाषित

@rufoot कुछ इस तरह से https://codesandbox.io/s/4zjwwq98j4 ?

https://codesandbox.io/embed/jzo2lool2y

जब आप रिएक्शन-विंडो के नीचे स्क्रॉल करते हैं, तो आप एक अलर्ट देख सकते हैं।

@ मैं अपने उपाय outerElementType साथ आपके समाधान की कोशिश कर चुका हूं और यह सुपर पिछलग्गू है, क्या आपने इसे नष्ट कर दिया है ?: D

मैंने इसे react-scrollbars-custom साथ आज़माया है। इसकी शिथिलता कम है लेकिन अभी भी कम है। क्या किसी ने कस्टम स्क्रॉलबार का उपयोग करके लैग के साथ कोई समस्या रखी है?

@ jancama2 ने तब इसका विरोध नहीं किया, जब आप पिछड़ जाते हैं तो आप कोड सैंडबॉक्स साझा करते हैं?

@rufoot कुछ इस तरह से https://codesandbox.io/s/4zjwwq98j4 ?

मैं आपके कार्यान्वयन का उपयोग कर रहा हूं लेकिन मुझे एक त्रुटि मिली है जिसमें कहा गया है कि फारवर्डरफ एक फ़ंक्शन नहीं है।

मेरे ऐप में जो समस्या है, जिसे मैं हल करने की कोशिश कर रहा हूं, मेरे पास आइटमों की एक बड़ी सूची है और जब मैं एक पर क्लिक करता हूं, तो ऐप दूसरे रूट पर रीडायरेक्ट हो जाएगा, इसलिए मुझे स्क्रॉल पोजीशन (शायद रेडक्स में) का ट्रैक रखने की आवश्यकता है और फिर रूट परिवर्तन के बाद स्क्रॉल स्थिति सेट करें।

@piecyk आपने react-window-infinite-loader से InfiniteLoader के साथ इसे संयोजित करने का प्रयास किया है।
मैं react-scrollbars-custom का उपयोग कर रहा हूं और यह अनंत लोडर को तोड़ता हुआ प्रतीत हो रहा है :(

मेरा कोड:

<InfiniteLoader isItemLoaded={isItemLoaded} itemCount={items.total} loadMoreItems={loadMoreItems}>
      {({
        onItemsRendered,
        ref,
      }: {
        onItemsRendered: (props: ListOnItemsRenderedProps) => any;
        ref: React.Ref<any>;
      }) => (
        <List
          height={TABLE_HEIGHT}
          width={width}
          itemCount={items.total}
          itemSize={ROW_HEIGHT}
          onItemsRendered={onItemsRendered}
          itemData={{ items }}
          ref={ref}
          outerElementType={Scrollbar}
        >
          {Row}
        </List>
      )}
    </InfiniteLoader>

अद्यतन: मुझे नहीं लगता कि यह अनंत स्क्रॉल घटक से संबंधित है। मैं कस्टम स्क्रॉलबार के साथ काम करने के लिए इसे प्राप्त नहीं कर सकता।

अगर कोई मेरे साथ प्रतिक्रिया-स्क्रॉलबार-कस्टम के लिए कार्यान्वयन को साझा कर सकता है तो मैं सराहना करूँगा

@ranihorev क्या आपको उस पैकेज का उपयोग करने की आवश्यकता है? ऊपर साझा किया गया कोड पेन @piecyk प्रतिक्रिया-कस्टम-स्क्रॉलबार का उपयोग करता है और अच्छी तरह से काम करता है (केवल एक रेफरी बनाते समय, जो किसी कारण से मेरे कोड में शून्य है)

ठीक है मुझे फिर से पूछने की जरूरत है। @piecyk मैं ऊपर से आपके कोड नमूने का उपयोग कर रहा हूं (जहां आपने @simjes को उत्तर दिया था)। हालांकि एक निश्चित आकार की सूची का उपयोग करने के बजाय, मैं VariableSizeList को लपेटने के लिए ऑटो बाहरी का उपयोग कर रहा हूं और आउटरिफाइमेंट टाइप निर्दिष्ट कर रहा हूं। कुछ इस तरह:
<TreeRoot onDragOver={e => this.onDragOver(e)} > <AutoSizer> {({ height, width }) => ( <List treeRef={this.props.treeRef} width={width} height={height} itemSize={index => rowHeights[index]} itemCount={nodeTree.length} itemData={{ nodeTree, expandedNodes, nodesFetching, nodesFetchingFailed, selectedNode, selectedNodeId, resetRowHeight: this.resetRowHeight, }} outerElementType={TreeScrollbar} outerRef={this.props.outerRef} onScroll={({ scrollOffset, scrollUpdateWasRequested }) => { if (scrollUpdateWasRequested) { console.log('scrollOffset: ', scrollOffset); } }} > {Node} </List> )} </AutoSizer> </TreeRoot>

मैं CustomScrollbars और CustomScrollbarsVirtualList को समान रूप से लागू करता हूं क्योंकि आपके पास रेफरी हमेशा सुस्त रहता है। मैंने उस घटक में रेफरी बनाने की कोशिश की है जिसका उपयोग मैं ऑटोएसाइज़र के साथ-साथ अभिभावक में भी कर रहा हूं लेकिन यह हमेशा अशक्त है। मैं वास्तव में समझने में कुछ मदद की सराहना करूंगा। जैसा कि मैंने ऊपर उल्लेख किया है, मुझे स्क्रॉल स्थिति का ट्रैक रखने और इसे अपने ऐप में रूट परिवर्तन पर सेट करने में सक्षम होने की आवश्यकता है ताकि सूची शीर्ष पर वापस न जाए।

@ChristopherHButler मैं पहले से ही अपने कोड में कई बार उस पैकेज का उपयोग कर रहा हूं, इसलिए मैं उसी पैकेज का उपयोग करता रहूंगा। मैं समाधान बहुत समान है, लेकिन यह नया डेटा नहीं लाती है

@ChristopherHButler इस मुद्दे के किसी भी कोड सैंडबॉक्स के बिना वास्तव में कहना मुश्किल है, क्या आप कुछ साझा कर सकते हैं?
यहां मूल विचार प्रतिक्रिया-कस्टम-स्क्रॉलबार से रेफरी सेट करना है ताकि रिएक्शन-विंडो

AutoSizer या VariableSizeList इस उदाहरण के साथ काम करेगा
https://codesandbox.io/s/react-window-custom-scrollbars-t4352

@ranihorev आप कोड सैंडबॉक्स उदाहरण भी साझा कर सकते हैं?

@ मैं एक साधारण (और टूटा हुआ) उदाहरण
https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-64kzh?fontsize=14

मैंने अन्य बदलावों की भी कोशिश की (जैसे रेफरी को रैपर बनने के लिए सेट करना) लेकिन कोई सफलता नहीं ...

धन्यवाद!

@ranihorev यह दृष्टिकोण कस्टम स्क्रॉल कार्यान्वयन की परवाह किए बिना समान होगा। उन्हें उसी तत्व के संदर्भ को सेट करने की आवश्यकता है जो स्क्रॉल और उस स्क्रॉल इवेंट को संभालने के लिए जिम्मेदार है।

react-scrollbars-custom रेंडर प्रॉप्स पैटर्न का उपयोग करते हुए नाइसर एपीआई प्रदान करता है ताकि आप https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-pjpxs जैसा कुछ कर सकें

कोई रूपरेखा नहीं की, आशा है कि यह मदद करता है iling

@piecyk मैं यहां आपके डेमो के साथ काम कर रहा हूं: https://codesandbox.io/s/4zjwwq98j4 । मैं redux में एक एक्शन भेजने के लिए onScrollStop का उपयोग करना चाहता हूं, इसलिए मैं स्क्रॉल स्थिति (इस थ्रेड से एक विचार: https://github.com/malte-wessel/react-custom-scrollbars-issues/146) पर सेट कर सकता हूं, लेकिन onScrollStart और onScrollStop मेरे कोड या आपके डेमो में काम नहीं करता है। क्या आप जानते हैं कि यह क्यों है? क्या सूची से स्क्रॉलबार तक प्रॉपर पास करने का कोई तरीका है?

@ChristopherHButler मुझे लगता है कि आपका सबसे अच्छा विकल्प सहारा का उपयोग करना है, जैसे कुछ

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-v2-usi1m

--- संपादित किया गया
यदि आप रूट बदलते समय पूरी सूची को अनमाउंट कर देते हैं तो आप कार्रवाई को भेज सकते हैं, अंतिम स्क्रॉलऑफ़सेट को Ref पर संग्रहीत किया जा सकता है और VariableSizeList से onScroll: function का उपयोग करके प्रत्येक स्क्रॉल परिवर्तन पर अपडेट किया जा सकता है, फिर आपको स्क्रॉलबार्स पर प्रोप्स पास करने की आवश्यकता नहीं है

@piecyk यह बहुत बढ़िया है, धन्यवाद!
btw, ऐसा लगता है कि आप सभी की जरूरत है onScroll फ़ंक्शन (जो मुझे याद किया गया है) और किसी भी रेफरी को आगे बढ़ाने की कोई आवश्यकता नहीं है।
https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-99dn1

माफ करना, मुझे माफ करना चाहिए कि मुझे अपने व्यवहार के कार्यान्वयन का उल्लेख करना चाहिए था। शायद यही कारण है कि मुझे काम करने के लिए onScrollStop नहीं मिल सकता है?

शीघ्र नवीनीकरण:
मैंने कंपोनेंट स्टेट जोड़ा और इसे ऑनक्रॉस सेट किया।

`
क्लास बेसट्री का विस्तार घटक {
...
राज्य = {स्क्रॉलपोजिशन: 0,};
...
listRef = React.createRef ();
आउटर रीफ = React.createRef ();
...
प्रस्तुत करना {
const {nodes, nodes
वापसी (

{(ऊंचाई, चौड़ाई}) => (
Ref = {this.listRef}
className = "सूची"
आउटर रीफ = {this.outerRef}
आउटरमेंटटाइप = {ट्रीस्क्रोलबार}
चौड़ाई = {चौड़ाई}
ऊँचाई = {ऊँचाई}
onScroll = {({ScrollOffset}) => this.setState ({स्क्रॉलपोजिशन: स्क्रॉलऑफ़सेट)}}
itemSize = {index => rowHeights [सूचकांक]}
itemCount = {nodeTree.length}
आइटमडैट = {{
नोडट्री,
विस्तारितनॉड्स,
नोडिंग,
nodesFetchingFailed,
चयनित
चयनित
रीसेट करें
}}
>
{नोड}

)}

);
}}

const mapStateToProps = राज्य => ({
स्क्रॉलपोजिशन: चयनकर्ताओं ।getTreeScrollPosition (राज्य),
};

const mapDispatchToProps = प्रेषण => ({
setTreeScrollPosition: स्थिति => प्रेषण (क्रियाएँ ।setTreeScrollPosition ({स्थिति})),
};

निर्यात डिफ़ॉल्ट कनेक्ट (mapStateToProps, mapDispatchToProps) (बेसट्री);
`

इसके बाद कंपोनेंटव्यूनलआउट पर मैं इस तरह से रिड्यूस में स्थिति सेट करने के लिए कार्रवाई को भेजता हूं:

componentWillUnmount() { this.props.setTreeScrollPosition(this.state.scrollPosition); }

मेरा एकमात्र मुद्दा अब स्क्रॉल स्थिति सेट करने में सक्षम हो रहा है जब घटक फिर से आरोहित करता है। मैंने इस पर scrollTop पद्धति तक पहुँचने की कोशिश की। इस प्रकार देखें:

this.listRef.current.scrollTop() लेकिन मुझे एक त्रुटि मिलती है कि यह एक फ़ंक्शन नहीं है। मुझे यकीन नहीं है कि कौन सी संपत्ति (this.listRef या this.outerRef) मैं स्क्रॉल स्थिति या किस पद्धति को सेट करने के लिए उपयोग कर सकता हूं। मैं सोच रहा था कि मैं बेसट्री के कंपोनेंट में इसे सेट कर सकता हूं:
componentDidMount() { const { scrollPosition } = this.props; if (this.listRef.current) { // console.log('initializing scroll position to : ', scrollPosition); this.listRef.current.scrollTop(scrollPosition); } }
इस काम को पाने के लिए किसी भी मदद की बहुत सराहना की जाएगी!
संपादित करें: मुझे बहुत खेद है, लेकिन मेरा कोड सही ढंग से इस संपादक में स्वरूपण नहीं करता है इसलिए मैं इसके लिए माफी चाहता हूं :(

@ranihorev forward ref प्रतिक्रिया-विंडो के लिए scrollTo, scrollToItem काम करने जैसे कार्यों की आवश्यकता है

@ChristopherHButler संदर्भ को इसके लिए ठीक उसी तरह काम करना चाहिए जैसे वे डॉक्स से बना रहे हैं

संदर्भ घटक के पेड़ के माध्यम से डेटा को पारित करने का एक तरीका प्रदान करता है, बिना हर स्तर पर मैन्युअल रूप से नीचे गुजरता है।

लेकिन हाँ जैसा कि आप पहले उल्लेख करते हैं कि यदि आप रूट परिवर्तन पर पूरे घटक को अनमाउंट करते हैं तो प्रॉपर पास करने की कोई आवश्यकता नहीं है। राज्य पर scrollPosition स्टोर नहीं करेगा क्योंकि स्क्रॉल करते समय आपको इसकी आवश्यकता नहीं होती है, कम पुन: रेंडर करने वाले, इसे रेफरी पर संग्रहीत करते हैं।

onScroll={({ scrollOffset }) => this.setState({ scrollPosition: scrollOffset })}

// to 

lastScrollOffsetRef = React.createRef(0);

<List
  onScroll={({ scrollOffset }) => {
    this.lastScrollOffsetRef.current = scrollOffset
  }}
  // ...rest
/>

// then in 
componentWillUnmount() { 
  this.props.setTreeScrollPosition(this.lastScrollOffsetRef.current); 
}

outerRef , आपके मामले में इसकी आवश्यकता नहीं है। listRef.current.scrollTo सही विधि है जिसका आप उपयोग करना चाहते हैं। हम्म को componentDidMount में विधि को कॉल करने के लिए अपना विचार सही है और काम करना चाहिए,

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertor-80zo7

Refs सेट करते समय कुछ समय की समस्या दिखती है, हो सकता है कि AutoSizer विलंब को उस सूची के रेंडर कर दे जो इस बनाता है।

हैक करने का विकल्प है, सेटटाइमआउट के साथ प्रतिक्रिया चक्र से ब्रेक लें और अगले टिक पर रेफ को कॉल करें

componentDidMount() {
  window.setTimeout(() => {
    if (this.listRef.current) {
      this.listRef.current.scrollTo(this.props.scrollPosition);
    }
  }, 0);
}

@piecyk मदद के लिए बहुत बहुत धन्यवाद, मैं वास्तव में इसकी सराहना करता हूं :)

धन्यवाद @piecyk यह काम करने लगता है। मार्ग परिवर्तन के बाद बढ़ते हुए एक मामूली झिलमिलाहट है, लेकिन मैं इसके साथ रह सकता हूं :) मैंने एक और हैक की भी कोशिश की, जो स्क्रॉलनामपेशन को पास करने के लिए क्लासनेम का उपयोग करना था और कस्टमस्कक्रबर्ल्स के रेफसेट्टर में स्क्रॉलटॉप सेट करना था:
if (scrollbarsRef) { forwardedRef(scrollbarsRef.view); // HACK scrollbarsRef.scrollTop(className); }
ऐसा लगता है कि यह अच्छा काम कर रहा है।
आपकी सभी मदद के लिए फिर से धन्यवाद, यह बहुत सराहना करता है !! 🙌🏻

दुर्भाग्य से, इस मुद्दे के सभी उदाहरण सही तरीके से काम नहीं करते हैं (कभी-कभी माउस स्क्रॉल पर प्रतिक्रिया करना बंद कर देता है)।

लेकिन यह उदाहरण सही काम करता है!

@ranihorev यह दृष्टिकोण कस्टम स्क्रॉल कार्यान्वयन की परवाह किए बिना समान होगा। उन्हें उसी तत्व के संदर्भ को सेट करने की आवश्यकता है जो स्क्रॉल और उस स्क्रॉल इवेंट को संभालने के लिए जिम्मेदार है।

react-scrollbars-custom रेंडर प्रॉप्स पैटर्न का उपयोग करते हुए नाइसर एपीआई प्रदान करता है ताकि आप https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-pjpxs जैसा कुछ कर सकें

मैंने इसे react-scrollbars-custom साथ आज़माया है। इसकी शिथिलता कम है लेकिन अभी भी कम है। क्या किसी ने कस्टम स्क्रॉलबार का उपयोग करके लैग के साथ कोई समस्या रखी है?

क्या आपने इसे पूरा किया? अंतिम समाधान क्या है?

यदि यह किसी की मदद करता है, तो मैं इसे ओवरलेस्क्राॅलबार के साथ काम करने में कामयाब रहा

const Overflow = ({ children, onScroll }) => {
  const ofRef = useRef(null);

  useEffect(() => {
    const el = ofRef.current.osInstance().getElements().viewport;

    if (onScroll) el.addEventListener('scroll', onScroll);

    return () => {
      if (onScroll) el.removeEventListener('scroll', onScroll);
    };
  }, [onScroll]);

  return (
    <OverlayScrollbarsComponent
      options={options}
      ref={ofRef}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
};

और फिर, अपने वर्चुअलाइज्ड घटक में:

<FixedSizeGrid
  {...props}
   outerElementType={Overflow}
>

मैं FixedSizeGrid साथ इसका उपयोग कर रहा हूं लेकिन इसे सूचियों के लिए समान काम करना चाहिए।

आशा है कि इससे सहायता मिलेगी।