Add Dynamic Nav Bar in one line with horizontal scroll bar

Question

Hello Friend I'm Making Phonegap App for (WindowsPhone, Android, IOS, BB7 & BB10) I want NavigationBar can contains more then five nav elements in One line with horizontal scrollable this is my html code for nav-bar(nav-bar data comes dynamically according to need of user)

<div id="customize_div_id" style="width:2000px;  >
  <div  onclick="customize_nav_scroll();"  data-role="navbar" >
    <ul   class="customize-item-class" id="customize_item_id"> 
    </ul>   
  </div>

I'm able to create Dynamic Nav-bar using this link More than 5 items per line in jQuery Mobile navbar

But My Problem is that Only five nav item will show to the user rest of all are horizontally scrollable.I'm not able to scroll these item's I Follow some method which is provided in JQuery Docs

.scrollLeft( value )

.scrollRight( value )

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe

I also Try below method with lot possibility But I didn't get desirable result

  function customize_nav_scroll(){ 

       var step = 1;
       var current = 0;
       var maximum = $("#customize_div_id div ul li").size();
       var visible = 2;
       var speed = 500;
       var liSize = 120;
       var height = 30;    
       var ulSize = liSize * maximum;
       var divSize = liSize * visible;


        $("#customize_div_id div").css("width",ulSize+"px");
        $("#customize_div_id div ").css("width", "auto").css("visibility",  "visible").css("overflow", "hidden").css("position", "relative");
        $("#customize_div_id div ul li").css("list-style","none").css("display","inline");
        $("#customize_div_id div ul ").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("padding","-10px");

        $("#customize_div_id div").swipeleft(function(event){
          if(current + step < 0 || current + step > maximum - visible) {
             return; }
             else {
               current = current + step;
                $("#customize_div_id div ul").animate({left: -(liSize * current)}, speed, null);
                }
                  return false;
            });

      $("#customize_div_id div").swiperight(function(event){
          if(current - step < 0 || current - step > maximum - visible) {return; }
              else {
                 current = current - step;
                 $("#customize_div_id div ul").animate({left: -(liSize * current)}, speed, null);
                 }
                    return false;
              });      
            }

Answer 1

I do not have time to test with phonegap now...but a simple overflow does not work?

On your container:

overflow: hidden;
overflow-x: auto;

On your navbar:

width: 2000px;

See this fiddle

Just an idea.

I will test later in phonegap.