प्रतिक्रिया

Question

में स्क्रॉल स्थिति संकेतक बनाना मैं प्रतिक्रिया में एक स्क्रॉल सूचक प्रगति पट्टी को कोड करने का प्रयास कर रहा हूं। मैंने jquery के साथ काम किया है लेकिन यह जानना चाहूंगा कि शुद्ध जावास्क्रिप्ट के साथ इसे कैसे किया जाए।

componentDidMount() { 
    window.addEventListener('scroll', this.handleScroll); 
    } 

    handleScroll() { 
    var winHeight = $(window).height(), 
     docHeight = $(document).height(), 
     value = $(window).scrollTop(), 
     max, percent; 

    max = docHeight - winHeight; 
    percent = (value/max) * 100; 
    this.props.updatePercent(percent); 
    } 

साथ ही, क्या मुझे शुद्ध जावास्क्रिप्ट में ऐसा करने से परेशान होना चाहिए? मुझे बताया गया है कि Jquery का उपयोग प्रतिक्रिया में नहीं किया जाना चाहिए।

Answer 1

क्या यह एकमात्र ऐसा स्थान है जहां आपने JQuery का उपयोग किया था? यदि ऐसा है, तो मैं इसे शुद्ध जावास्क्रिप्ट के लिए मिटाने की अनुशंसा करता हूं। JQuery के साथ आप जो कुछ भी कर सकते हैं, आप रिएक्ट और शुद्ध जावास्क्रिप्ट के साथ भी कर सकते हैं, और यह ओवरहेड के लायक नहीं है।

यहां आपके handleScroll फ़ंक्शन का शुद्ध जावास्क्रिप्ट संस्करण है। ध्यान दें कि दस्तावेज़ की ऊंचाई गणना करने के लिए कुख्यात रूप से परेशान है, लेकिन मैंने this question का दृष्टिकोण लिया है (जो सिर्फ JQuery के कार्यान्वयन को पुन: उत्पन्न करता है)।

handleScroll() { 
    var winHeight = window.innerHeight; 

    // Annoying to compute doc height due to browser inconsistency 
    var body = document.body; 
    var html = document.documentElement; 
    var docHeight = Math.max(body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight); 

    var value = document.body.scrollTop; 
    ... 
} 

अद्यतन

आप एक तत्व के अंदर पुस्तक स्थिति प्राप्त करना चाहते हैं, तो आप

var el = document.getElementById('story_body'); 
var minPixel = el.offsetTop; 
var maxPixel = minPixel + el.scrollHeight; 
var value = document.body.scrollTop; 

// respect bounds of element 
var percent = (value - minPixel)/(maxPixel - minPixel); 
percent = Math.min(1,Math.max(percent, 0))*100; 

Answer 2

की तरह कुछ की आवश्यकता होगी अपने दूसरे सवाल का जवाब करने के लिए: इस विशेष मामले में, आप बस jQuery पर चिपक सकते हैं (हालांकि मैं वेनिला जावास्क्रिप्ट संस्करण पसंद करता हूं)।

के साथ प्रतिक्रिया करते हैं, इसके लिए jQuery का उपयोग करने के लिए पूरी तरह से ठीक है:

• असली डोम, जो (जैसे डोम में घटक ऊंचाई के रूप में, या आपके मामले में स्थिति स्क्रॉल) प्रतिक्रिया करने के लिए अज्ञात हैं से पढ़ने की जानकारी
• ajax सामान

के साथ प्रतिक्रिया, आप के लिए jQuery का उपयोग नहीं करना चाहिए:

• जोड़ तोड़ डीओएम सीधे: प्रतिक्रिया के माध्यम से केवल डीओएम में हेरफेर करें। (प्रतिक्रिया में jQuery के साथ डोम में हेरफेर करना बड़ी परेशानी की गारंटी है)
• डीओएम जानकारी पढ़ना जो प्रतिक्रिया क्षेत्र के मूल्य के रूप में प्रतिक्रिया दे सकता है और जानना चाहिए। (चीजें वास्तव में नहीं टूटती हैं, लेकिन अगर आप प्रतिक्रिया के सख्त डिजाइन दिशानिर्देशों को रोकने के लिए jQuery का उपयोग करते हैं तो यह आपके प्रतिक्रिया कोड को डीबग करने में कठोर बनाता है)