कार्य:

स्पर्श उपकरणों पर वर्तमान क्षैतिज स्क्रॉल स्थिति के आधार पर .container.scrollLeft और transform: translateX छवि प्राप्त करें। .container चौड़ाई इसके .wrapper से बड़ी है।

यहां आप लाइव उदाहरण देख सकते हैं।

समस्या:

छवि चलती है लेकिन बेहद कम एफपीएस के साथ।

अपेक्षित व्यवहार:

तेज और सुचारू आंदोलन।

विस्तृत विवरण:

इसे पढ़ने के लिए आपका बहुत-बहुत धन्यवाद! मैं वास्तव में इस मुद्दे से घिरा हुआ हूं। डेस्कटॉप संस्करण पर, मैं केवल onMouseMove ईवेंट के साथ छवियों की स्थिति को बाध्य कर रहा हूं और सब कुछ बढ़िया है। लेकिन मोबाइल संस्करण के साथ मैंने onTouch इवेंट और नेटिव स्क्रॉल इवेंट की कोशिश की लेकिन कुछ भी उम्मीद के मुताबिक काम नहीं किया। मैं एक समाधान या कुछ कामकाजी उदाहरण की तलाश में था और कुछ भी नहीं मिला। तो मैं यहाँ हूँ।

1
CillianFrost 13 नवम्बर 2019, 23:30

1 उत्तर

सबसे बढ़िया उत्तर

इस useEffect में आप हर रेंडर पर स्क्रॉल इवेंट श्रोता जोड़ रहे हैं। तो जैसे ही यह स्क्रॉल करता है, यह फिर से प्रस्तुत करता है (जैसा इसे करना चाहिए), लेकिन यह श्रोता को कई बार फिर से जोड़ता है।

useEffect(() => {
    handleScroll();
    wrapperEl.current.addEventListener("scroll", handleScroll, {
      passive: true
    });
  });

श्रोता को पहली बार प्रस्तुत करने पर जोड़ने के लिए यह कहीं अधिक कुशल (और ढेलेदार स्क्रॉल करने की संभावना कम) है (निर्भरता सरणी के रूप में [] का उपयोग करके)। आपको इसे एक ऐसे फ़ंक्शन को वापस करके भी साफ़ करना चाहिए जो इसे डिस्माउंट पर हटा देता है:

useEffect(() => {
    const el = wrapperEl.current;
    el.addEventListener("scroll", handleScroll, {
      passive: true
    });
    return () => el.removeEventListener("scroll", handleScroll);
  }, []);

चीजों को सुचारू रूप से चलाने के लिए शायद यह पर्याप्त है। यदि नहीं, तो आप अपने handleScroll कॉल को भी थ्रॉटल कर सकते हैं - कई हुक-आधारित उदाहरण उपलब्ध हैं।

1
Will Jenkins 14 नवम्बर 2019, 00:00