垂直方向のjqueryコンテンツボックスを水平方向にスクロールするように変更する

Question

私は、コンテンツを（私の場合はサムネイルで）ajax（最初のhtmlに埋め込むのではなく）を介して動的に読み込むスクロールコンテンツボックスを探していました。私はこれを見つけました：http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/それは垂直にスクロールすることを除いて、私が欲しいものを正確に行います。私は本当に水平スクロールが必要です。私は危険なので十分なjavascriptだけを知っているので、私はそれを修正しようとしたすべての調整がそれを動作させていません。

私はこのコードが好きです。なぜなら、これは追加のjsアドオンではなくjqueryライブラリを使用しているからです。

$('document').ready(function(){ 
    updatestatus(); 
    scrollalert(); 
}); 
function updatestatus(){ 
    //Show number of loaded items 
    var totalItems=$('#content p').length; 
    $('#status').text('Loaded '+totalItems+' Items'); 
} 
function scrollalert(){ 
    var scrolltop=$('#scrollbox').attr('scrollTop'); 
    var scrollheight=$('#scrollbox').attr('scrollHeight'); 
    var windowheight=$('#scrollbox').attr('clientHeight'); 
    var scrolloffset=20; 
    if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) 
    { 
     //fetch new items 
     $('#status').text('Loading more items...'); 
     $.get('new-items.html', '', function(newitems){ 
      $('#content').append(newitems); 
      updatestatus(); 
     }); 
    } 
    setTimeout('scrollalert();', 1500); 
} 

水平にスクロールするように修正する方法はありますか？

Answer 1

考えられるのは、y軸の上にオーバーフローを隠す（スクロールは水平で垂直ではないため）<div id="content">の項目をfloat:leftと適切な幅/高さで並べ替えて水平にポップアップさせることですファッション。

は古いCSSルールを維持し、それらを追加します。

#scrollbox { 
    overflow: auto; 
    overflow-y: hidden; 
} 

#content p { 
    width: 20px; 
    float: left; 
    margin-left: 20px; 
} 

あなたはまた、水平方向のスクロールが右端にある場合、それが引き金となるよう条件if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))を変更する必要があります。