क्या "अनंत स्क्रॉल" जावास्क्रिप्ट लिखना संभव है जो बैक बटन को संभाल सकता है?

Question

यहां जाएं: http://www.infinite-scroll.com/ अनंत स्क्रॉल के साथ खेलो। ध्यान दें कि आप एक लिंक पर क्लिक नहीं कर सकते हैं और फिर "बैक" दबा सकते हैं। जब आप ऐसा करते हैं तो इसमें ग्लिच होता है।

तो, मैं अपनी खुद की अनंत स्क्रॉल लिखने की योजना बना रहा हूं।

• जब उपयोगकर्ता नीचे जाता है, तो एक AJAX कॉल लोड करें। फिर div में परिणाम JQuery "संलग्न करें" करें। फिर, उन तत्वों पर मेरे अन्य कार्यों को बुलाओ। (मैंने जावास्क्रिप्ट में उन सभी तत्वों की पृष्ठभूमि छवियों को सेट किया है)।

क्या यह काम करेगा? अगर मैं ऐसा करता हूं ... क्या मैं बैक बटन को संभालने में सक्षम हूं?

Answer 1

मैं एक परियोजना मैं पर काम किया पर बहुत ही बात पर विचार होता है। एक विकल्प जिसे मैंने सोचा था, बैक बटन को उस स्थान पर वापस जाने की अनुमति देना था जहां लिंक क्लिक किया गया था (सामान्य ब्राउज़िंग की तरह)।

सबसे पहले, आपको रिकॉर्ड करने की आवश्यकता है कि अनंत पृष्ठ को किस प्रकार स्क्रॉल करना है ताकि आप उस खंड को फिर से लोड कर सकें। आप window.location.hash मान के साथ कुछ चतुर खेल के साथ ऐसा कर सकते हैं। यदि आप my answer to this question देखते हैं, तो मैं Asual's address plugin का उपयोग करके सादे जावास्क्रिप्ट या jQuery में इसे और अधिक विस्तार से समझाता हूं।

इसके बारे में बुनियादी हिस्सा इस तरह करना चाहते हैं:

// Whatever you're using to load the next page 
function scrollToNextPage(page){ 
    // Your infinite scrolling stuff 
    $.address.parameter("currentPage", page); 
} 

$.address.externalChange(function(){ 
    var page = $.address.parameter("currentPage"), 
     top = $.address.parameter("linkTop"); 

    loadAjaxUpTo(page); 
    $('html, body').animate({ scrollTop: top }, 500); 
}); 

// Set a parameter for the location of a clicked link 
$("a").live('click', function(){ 
    $.address.parameter("linkTop", $(this).scrollTop()); 
}); 

मैं पिछले बिट को लागू नहीं किया था (हो रही लिंक की स्थिति को क्लिक किया था), लेकिन मैं नहीं देख सकते हैं क्यों यह काम नहीं होगा । इससे खिड़की अच्छी तरह से स्क्रॉल कर सकती है जहां आप कहां हैं। आप इसे हमेशा लोड किए गए पृष्ठ पर एंकर के साथ सेट कर सकते हैं (लेकिन जब आप इसे स्क्रॉल करते हैं, तो यह हमेशा पृष्ठ के शीर्ष पर जाएगा)।

हालांकि कुछ अंक, मैं इस की अनुशंसा नहीं करता। कम से कम प्रोजेक्ट के लिए मैं कर रहा था, यह वास्तव में आवश्यक नहीं था। मेरी परियोजना में, हमने उम्मीद की थी कि उपयोगकर्ता अपने विकल्पों को बदलने के लिए वापस जाएं और यह पता लगाएगा कि स्क्रॉलिंग कोई समस्या नहीं होगी (हालांकि हमारे पास स्क्रॉल करने के लिए बहुत से पृष्ठ नहीं थे)। AJAX (और छवियों को सेट करने के लिए आपकी जावास्क्रिप्ट) को फिर से लोड और निष्पादित करने की आवश्यकता है जो आपको कितने पृष्ठों को पुनः लोड करने की आवश्यकता है, इस पर निर्भर करता है। लिंक पर स्क्रॉल करने के लिए समय के शीर्ष पर (आप केवल window.scrollTo कर सकते हैं लेकिन आपको एनीमेशन नहीं मिलता है, इसलिए सब कुछ बहुत झटकेदार है। आप हमेशा उस पृष्ठ को लोड कर सकते हैं जिस पर व्यक्ति था और पिछले पृष्ठों के बारे में भूल जाओ, लेकिन आप अभी भी उस तरह के उपयोगकर्ता अनुभव तोड़ने।या (मैंने जो कोशिश की) दो तरह की अनंत स्क्रॉल को लागू करना था। तो यह पेज उपयोगकर्ता से और prepend पिछले पृष्ठों क्लिक किया अगर वे ऊपर स्क्रॉल लोड होगा - यह है कि क्या यह हालांकि था के लिए बहुत ज्यादा काम था।

एक और मुद्दा यह है कि, अगर आप अभी भी यह करने के लिए थे, तो आप अपने पृष्ठों मिल (और यह सुनिश्चित करें कैश तुरंत समाप्त होने वाली नहीं है) के लिए एक GET अनुरोध का उपयोग करना चाहते है। मैंने पाया कि जीएटी अनुरोध के साथ अजाक्स द्वारा अनुरोध किए गए पृष्ठ कैश से लेंगे (कम से कम कुछ ब्राउज़रों पर मैंने कोशिश की थी)। POST पर अपने विवरण भेजना हमेशा कैश को अनदेखा कर देगा।

Answer 2

बैक बटन को संभालने में सक्षम होने का एकमात्र तरीका स्थान हैश (# प्रतीक के बाद थोड़ा) को बदलना है। पीठ के हैंडलिंग दबाकर और आगे बटन को दो तरह से किया जा सकता है:

1. एक <a name="bookmark1"></a> जो अद्वितीय है करने के लिए प्रत्येक खंड जोड़ा गया है, और location.hash इससे मिलते हुए बदल जाते हैं।
2. परिवर्तन के लिए location.hash देखने के लिए 100ms जैसे कम समय के साथ setInterval का उपयोग करें और पृष्ठ के आवश्यक भाग पर जाएं। आपको ऐसा करना है क्योंकि आप वास्तव में पता नहीं लगा सकते कि बैक/फॉरवर्ड बटन कब क्लिक किए जाते हैं।

यह आपको यह दिखाने के लिए दूसरी विधि का कार्यान्वयन है कि यह कैसे काम करता है। इस में, प्रत्येक ajax अनुरोध <a name="ajax-section-1"></a> और ajax-section-2 आदि

function addToBottom(htmlToAdd) { 
    $('#main-div').append(htmlToAdd); 
    window.location.hash = $('#main-div a[name^=ajax-section-]').last().attr('name'); 
}