मैं एक पुस्तक दर्शक लिख रहा हूं जो सामग्री को गतिशील रूप से लोड करता है क्योंकि उपयोगकर्ता इसे नीचे स्क्रॉल करता है। मेरी पहली समस्या यह है कि स्क्रॉलबार कैसे सेट करें। चूंकि हम केवल अपने डेटाबेस में पैराग्राफ को बिना किसी आकार की जानकारी के स्टोर करते हैं, मैं केवल अनुमान लगा सकता हूं कि दस्तावेज़ कितना लंबा है। इस तरह के अनुमान के आधार पर, मैं एक स्क्रॉल करने योग्य विंडो बनाना चाहता हूं जो 10,000 पिक्सेल लंबी दिखाई दे और आवश्यकतानुसार पैराग्राफ लोड करे।

सबसे आसान तरीका मैं सोच सकता हूं कि वास्तव में एक डीआईवी बनाना है जो 10,000 पिक्सल लंबा है और पूरी तरह से मेरी सामग्री दिखाते हुए स्क्रॉल स्थिति पर एक एम्बेडेड div की स्थिति है।

क्या जावास्क्रिप्ट के तहत स्क्रॉलबार को पूरी तरह से नियंत्रित करने का कोई तरीका है (इसकी न्यूनतम, अधिकतम, स्थिति, सापेक्ष अंगूठे का आकार निर्धारित करना) या क्या मैं ऊपर वर्णित सरल तरीके से जाता हूं या ऐसा करने का कोई और तरीका है?

मैं एक्स्टजेएस ढांचे का उपयोग कर रहा हूं लेकिन ऐसा लगता है कि वहां कोई सीधी सहायता नहीं है, हालांकि वी 4 में एक अनंत ग्रिड शामिल है।

4
dave 28 फरवरी 2011, 02:04

3 जवाब

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

इस प्रश्न के अन्य उत्तरों ने केवल सामग्री को बढ़ाया क्योंकि उपयोगकर्ता नीचे पहुंच गया, यह वह नहीं है जो मैं बाद में था। मुझे एक पूर्ण आकार, लेकिन कम आबादी वाला, स्क्रॉल करने योग्य क्षेत्र प्रदर्शित करने की आवश्यकता है। मैं जिस समाधान के साथ आया था वह बहुत आसान था:

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

जब पुस्तक डीआईवी स्क्रॉल की जाती है, तो जावास्क्रिप्ट गणना करता है कि कौन से अनुच्छेद डीआईवी अब दिखाई दे रहे हैं। जो दिखाई दे रहे हैं लेकिन आबाद नहीं हैं उन्हें एक साथ बंडल किया गया है। एक वेब सेवा का उपयोग तब आवश्यक पैराग्राफ डीआईवी को पॉप्युलेट करने और उन्हें सटीक रूप से आकार देने के लिए किया जाता है।

एल्गोरिथ्म मैं कुछ आसपास (नहीं दिखाई देने वाले) पैराग्राफ का उपयोग करता हूं ताकि कुछ आगे पढ़ने और क्षमता को कम करने के लिए। स्मूद स्क्रॉलिंग में सहायता के लिए स्क्रीन को अपडेट करने के बाद एक आलसी लोडर आगे के पैराग्राफ पढ़ता है।

यह भी बहुत आसान निकला। कड़ी मेहनत एल्गोरिदम को खंडित करने और आलसी पाठक को जोड़ने में है।

4
dave 17 मार्च 2011, 21:10

यहाँ कई तरीके हैं:

चिनाई अनंत स्क्रॉल http://desandro.com/demo /masonry/docs/infinite-scroll.html

सीपीडीई नमूना:

$wall.infinitescroll({
  navSelector  : '#page_nav',  // selector for the paged navigation 
  nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loadingImg : 'img/loader.gif',
  donetext  : 'No more pages to load.',
  debug: false,
  errorCallback: function() { 
    // fade out the error message after 2 seconds
    $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
  }
  },
  // call masonry as a callback
  function( newElements ) { 
    $(this).masonry({ appendedContent: $( newElements ) }); 
  }
);

AJAXian Way (कोई प्लगइन नहीं) http://ajaxian. com/archives/implementing-infinite-scrolling-with-jquery

कोड:

//Scroll Detection
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

//Loading More content
function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src="bigLoader.gif"/>’);
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),   

    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);           
        }
        $(’div#lastPostsLoader’).empty();
    });
};

अनंत स्क्रॉल jQuery प्लगइन (मूल रूप से वर्डप्रेस प्लगइन) http: //www.infinite-scroll.com/infinite-scroll-jquery-plugin/

नमूना कोड:

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
  $('#content').infinitescroll({

    navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
  });
All options


// usage:
// $(elem).infinitescroll(options,[callback]);

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
$('#content').infinitescroll({

  navSelector  : "div.navigation",            
                 // selector for the paged navigation (it will be hidden)

  nextSelector : "div.navigation a:first",    
                 // selector for the NEXT link (to page 2)

  itemSelector : "#content div.post",          
                 // selector for all items you'll retrieve

  debug        : true,                        
                 // enable debug messaging ( to console.log )

  loadingImg   : "/img/loading.gif",          
                 // loading image.
                 // default: "http://www.infinite-scroll.com/loading.gif"

  loadingText  : "Loading new posts...",      
                 // text accompanying loading image
                 // default: "<em>Loading the next set of posts...</em>"

  animate      : true,      
                 // boolean, if the page will do an animated scroll when new content loads
                 // default: false

  extraScrollPx: 50,      
                 // number of additonal pixels that the page will scroll 
                 // (in addition to the height of the loading div)
                 // animate must be true for this to matter
                 // default: 150

  donetext     : "I think we've hit the end, Jim" ,
                 // text displayed when all items have been retrieved
                 // default: "<em>Congratulations, you've reached the end of the internet.</em>"

  bufferPx     : 40,
                 // increase this number if you want infscroll to fire quicker
                 // (a high number means a user will not see the loading message)
                 // new in 1.2
                 // default: 40

  errorCallback: function(){},
                 // called when a requested page 404's or when there is no more content
                 // new in 1.2                   

  localMode    : true
                 // enable an overflow:auto box to have the same functionality
                 // demo: http://paulirish.com/demo/infscr
                 // instead of watching the entire window scrolling the element this plugin
                 //   was called on will be watched
                 // new in 1.2
                 // default: false


    },function(arrayOfNewElems){

     // optional callback when new content is successfully loaded in.

     // keyword `this` will refer to the new DOM content that was just added.
     // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
     //                   all the new elements that were found are passed in as an array

});

// load all post divs from page 2 into an off-DOM div
$('<div/>').load('/page/2/ #content div.post',function(){ 
    $(this).appendTo('#content');    // once they're loaded, append them to our content area
});

jQuery के साथ स्क्रॉल करते समय सामग्री लोड करें (एक और कोई प्लगइन नमूना नहीं) http://www.webresourcesdepot.com/load-content- while-scrolling-with-jquery/

कोड:

function lastPostFunc() 
{ 
    $('div#lastPostsLoader').html('<img src="bigLoader.gif">');
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),     

    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);            
        }
        $('div#lastPostsLoader').empty();
    });
}; 

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});
3
Meligy 28 फरवरी 2011, 02:27
उन लोगों के लिए धन्यवाद। दुर्भाग्य से, जब उपयोगकर्ता नीचे की ओर स्क्रॉल करता है तो वे सभी केवल पृष्ठ का विस्तार करते हैं। यह एक ब्लॉग दर्शक के लिए ठीक है जहां लोगों द्वारा उन्हें क्रमिक रूप से पढ़ने की संभावना है। स्क्रॉलबार को देखें जैसे ही आप नीचे हिट करते हैं - आपने 100% अंक मारा, फिर पृष्ठ विस्तारित होता है और अब आप 90% अंक पर हैं। मेरा ऐप एक पुस्तक दर्शक है, मुझे लगता है कि उपयोगकर्ता पुस्तक में कहीं भी स्क्रॉल अंगूठे को खींचने में सक्षम होने की उम्मीद करेंगे। इसके अलावा, मेरी किताबें हजारों पेज लंबी हो सकती हैं - इस प्रकार मुझे उन पेजों को स्वैप-आउट करने की ज़रूरत है जो दिखाई नहीं दे रहे हैं।
 – 
dave
28 फरवरी 2011, 21:03
मुझे लगता है कि इसके लिए आपको सादे-पुराने-फ्रेमसेट, या शायद (अधिक संभावना?) आईफ्रेम का उपयोग करने की आवश्यकता होगी। मुझे लगता है कि Google रीडर व्यापक दाईं ओर पोस्ट के लिए अनंत स्क्रॉल करके और संकीर्ण बाईं ओर ब्लॉग की सूची को अलग-अलग करके गैर-स्थानांतरित करके ऐसा करता है।
 – 
Meligy
1 मार्च 2011, 00:36
क्या आपने स्क्रॉल करने योग्य आईफ्रेम पर इस तरह की स्क्रिप्ट के साथ आईफ्रेम सामग्री की कोशिश की है?
 – 
Meligy
3 मार्च 2011, 02:23

आज सुबह स्मैशिंग मैगज़ीन पर मिले इस अनंत स्क्रोलर को आज़माएँ:

http://markholton.com/posts/17-infiniscroll-jquery-plugin-released

1
BJ Safdie 28 फरवरी 2011, 02:11
धन्यवाद। जैसा कि मैंने नीचे मोहम्मद मेलीगी को टिप्पणी की थी: दुर्भाग्य से, यह केवल उस पृष्ठ का विस्तार करता है जब उपयोगकर्ता नीचे की ओर स्क्रॉल करता है। यह एक ब्लॉग दर्शक के लिए ठीक है जहां लोगों द्वारा उन्हें क्रमिक रूप से पढ़ने की संभावना है। स्क्रॉलबार को देखें जैसे ही आप नीचे हिट करते हैं - आपने 100% अंक मारा, फिर पृष्ठ विस्तारित होता है और अब आप 90% अंक पर हैं। मेरा ऐप एक पुस्तक दर्शक है, मुझे लगता है कि उपयोगकर्ता पुस्तक में कहीं भी स्क्रॉल अंगूठे को खींचने में सक्षम होने की उम्मीद करेंगे। इसके अलावा, मेरी किताबें हजारों पेज लंबी हो सकती हैं - इस प्रकार मुझे उन पेजों को स्वैप-आउट करने की ज़रूरत है जो दिखाई नहीं दे रहे हैं।
 – 
dave
28 फरवरी 2011, 21:05