title: how to use scroll function in dynamically data is coming in footer
body: <p>i have to use scroll function in footer in which data is been stored in button dynamically and that scroll should hide then we scroll it show again and all data and scroll should be dynamically load in footer only window screen should not change only footer will change at time of scroll</p>
  
  <p>in jquery:-</p>
  
  <pre><code> function callXMLConnection() {  
  
          $.support.cors = true;
             $.ajax({
                  type: "GET",
                  url: "url.html",
                  contentType: "text/xml",
                  dataType: "xml",
                  data: "",
                  cache:false,
                  processData:false,
                  crossDomain:true,
                  success: processSuccess,
  
              });
  
        }
  
  
        function processSuccess(data) {
  
               $(data).find("category").each(function () {
  
               var id = $(this).find('id').text();
               var title = $(this).find('title').text();
               var scripts = "&lt;a href='#' data-role='button' data-theme='b' data-inline='true'&gt;"+title+"&lt;/a&gt;"                
              $("#menu_button1")
               .append(scripts)
               .trigger('create');
           });
        }
     $(document).unbind('ready').bind('ready', function () {
       $("#menu_button1").scroll(function () {
       // if ($("#menu_button1").scrollLeft(300) == $(document).width() - $("#menu_button1").width()) 
       if ($("#menu_button1").scrollHeight - $("#menu_button1").scrollTop() == $("#menu_button1").outerHeight())
       {
         callXMLConnection(); 
     }
  });
  
       });
  </code></pre>
  
  <p>in html5:-</p>
  
  <pre><code>&lt;div data-role="footer" data-position="fixed" id="scroll_menu" style="overflow: scroll;"&gt;
                &lt;div class="menu" id="menu_button1" &gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>