एल्म

Question

में एक div के नीचे ऑटो-स्क्रॉल कैसे करें I <div> एस को एक रैपर <div> में जोड़ें और मुझे हर बार जोड़े गए अंतिम को स्क्रॉल करने में सक्षम होना चाहिए। मैं एल्म में यह कैसे करूं?

<div class="messages" style="height: 7em; overflow: scroll"> 
    <div>Anonymous: Hello</div> 
    <div>John: Hi</div> 
</div> 

Intuitively, ऐसा लगता है जैसे मैं एक port JavaScript कोड element.scrollTop = element.scrollHeight चलाता है कह सकते हैं:

AddChatMessage chatMessage -> 
    ({ model | chatMessages = model.chatMessages ++ [ chatMessage ] } , scrollToBottomPort "div.messages") 

समस्या scrollToBottom से पहले model अद्यतन हो जाता है कहा जाता हो जाता है। तो कोई बड़ा सौदा नहीं, मैं इसे Task में परिवर्तित करता हूं। लेकिन फिर भी, भले ही model पहले अपडेट हो गया है, view अभी तक अपडेट नहीं किया गया है। तो मैं नीचे से दूसरी वस्तु को स्क्रॉलिंग समाप्त!

यह शायद एक सामान्य प्रश्न की ओर जाता है कि मैं एल्म में उत्सुक हूं, मॉडल में बदलाव के कारण दृश्य को अपडेट करने के बाद आप Cmd कैसे चलाते हैं?

Answer 1

आप किसी सूची के नीचे स्क्रॉल करने के लिए पोर्ट का उपयोग कर सकते हैं।
उस स्थिति में, आपको स्क्रॉल करने से पहले 1 एनीमेशन फ्रेम की प्रतीक्षा करने के लिए जावास्क्रिप्ट सेट करने की आवश्यकता है। यह सुनिश्चित करने के लिए कि आपकी सूची प्रस्तुत की गई है।

ऐसा करने का एक आसान तरीका एल्म की Dom.Scroll लाइब्रेरी का उपयोग करना है।
और toBottom फ़ंक्शन का उपयोग करें।

आप शामिल करते हैं कि इस तरह अपने कोड में:

case msg of 
    Add -> 
     (model ++ [ newItem <| List.length model ] 
     , Task.attempt (always NoOp) <| Scroll.toBottom "idOfContainer" 
     ) 

    NoOp -> 
     model ! [] 

यह काम करना चाहिए। मैंने एक कामकाजी उदाहरण बनाया है here in runelm.io

Answer 2

Dom.Scroll निश्चित रूप से जाने का तरीका है और इसे कार्यान्वित करना आसान है।

1. संलग्न HTML तत्व सेट करें जिसे आप स्क्रॉल करना चाहते हैं, एक अलग आईडी है।
2. सुनिश्चित करें कि तत्व में अतिप्रवाह-वाई की स्टाइल है: स्क्रॉल या ओवरफ़्लो-एक्स: स्क्रॉल।
3. वास्तव में जो भी संदेश उस तत्व को प्रदर्शित/खोला जाने का कारण बनता है (संदेश तत्व को खुलता/प्रदर्शित करता है जबकि आप जिस आदेश को आग लगाते हैं, वह स्क्रॉल करेगा)। ध्यान दें कि आप कमांड का उपयोग करते हैं क्योंकि डीओएम को बदलना तकनीकी रूप से दुष्प्रभाव है।

कहते हैं के लिए निचले हिस्से तक स्क्रॉल प्रलेखन को देखते हुए: toBottom : Id -> Task Error(), आप देख सकते हैं कि यह एक टास्क होने की जरूरत है, तो आप Task.attempt में लपेट कर सकते हैं। उदाहरण के लिए: Task.attempt (\_ -> NoOp) (Dom.Scroll.toBottom Id)

फिर आप एक समारोह की आवश्यकता होगी एक संदेश में एक परिणाम त्रुटि() कन्वर्ट करने के लिए है, लेकिन स्क्रॉल है के बाद से या तो असफल या थोड़ा नकारात्मक पक्ष यह है कि अगर यह होता है, आप की तरह एक डमी समारोह सेट कर सकते हैं है की संभावना नहीं (\_ -> NoOp) इसके बजाय एक त्वरित हैक के रूप में।