एल्म

Question

में अनंत स्क्रॉल मैं एल्म में एक साधारण एप्लिकेशन बना रहा हूं जो कि एक दूसरे के नीचे divs की एक सूची दिखाता है, और मैं पृष्ठ की आखिरी div प्रत्येक बार नई सामग्री जोड़ने के लिए अनंत स्क्रॉल कार्यक्षमता जोड़ना चाहता हूं व्यूपोर्ट में

क्या एल्म में यह देखने का कोई तरीका है कि व्यूपोर्ट में एक div प्रकट होता है? एक विकल्प के रूप में, एक संकेत के रूप में, माउस स्क्रॉल घटना ट्रैक करने के लिए एक तरीका है?

Answer 1

वर्तमान में स्क्रॉल ईवेंट के लिए कोई एल्म समर्थन नहीं है, इसलिए आपको बंदरगाहों का उपयोग करना होगा। यहां एक साधारण उदाहरण है।

हमें यह बताने के लिए जावास्क्रिप्ट फ़ंक्शन की आवश्यकता है कि सूची में अंतिम तत्व दृश्य पोर्ट में है या नहीं। हम this StackOverflow answer से isElementInViewport कोड (यहां भविष्य में संदर्भ के लिए कॉपी करने) ले जा सकते हैं:

<div class="wrapper"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
</div> 

आपका एल्म कोड एक बंदरगाह एक संकेत के रूप में कार्य कर सकता है:

function isElementInViewport (el) { 
    //special bonus for those using jQuery 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 

    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
    ); 
} 

मान लें कि आपका एचटीएमएल कुछ इस तरह दिखता चलो हमें बताएं कि आखिरी वस्तु दिखाई दे रही है या नहीं।

port lastItemVisible : Signal Bool 

अब आपको चीजों के जावास्क्रिप्ट पक्ष पर पोर्ट कोड को तार करने की आवश्यकता है। यह कोड window.onscroll ईवेंट सुनेंगे, फिर यह देखने के लिए जांचें कि .wrapper div के अंदर अंतिम आइटम दिखाई दे रहा है, और उचित सिग्नल भेजें।

var app = Elm.fullscreen(Elm.Main, { 
    lastItemVisible: false 
}); 

window.onscroll = function() { 
    var wrapper = document.getElementsByClassName("wrapper")[0]; 
    var lastItem = wrapper.childNodes[wrapper.childNodes.length - 1]; 

    if (isElementInViewport(lastItem)) { 
    app.ports.lastItemVisible.send(true); 
    } else { 
    app.ports.lastItemVisible.send(false); 
    } 
}; 

तो आप के बजाय सिर्फ ट्रैकिंग स्क्रॉल ईवेंट, there is a related StackOverflow answer here के लिए एक संकेत करना चाहता था।