css/jquery：水平方向にスクロールしているが垂直方向にスクロールしていないときに修正されました。

ヘッダーが最初の列にある大きな表と、最初の列を固定したまま表を水平にスクロールするjQueryスライダープラグイン（https://github.com/keesschepers/jquery-ui-content-slider）css/jquery：水平方向にスクロールしているが垂直方向にスクロールしていないときに修正されました。

しかし、下向き（垂直）にスクロールしようとすると、固定プロパティ（css）があるため、残りの最初の列（画面の高さよりも大きい）が表示されません。これを修正するCSSやjQueryのトリックはありますか？

CSSコード：

 table tr td:first-child { position: fixed; }

HTMLコード：

 <div id="#content-scroll"> 
     <table> 
     <tr><td></td>...and many more cells</tr> 
     ...and many more rows 
     </table></div>

のjQueryコード：

   <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#content-slider").slider({ 
       animate: true, 
       change : function (e, ui) { 
        var maxScroll = $("#content-scroll").prop("scrollWidth") - 
         $("#content-scroll").width(); 
        $("#content-scroll").animate({ 
         scrollLeft : ui.value * (maxScroll/100) 
        }, 1000); 
       }, 
       slide : function (e, ui) 
       { 
        var maxScroll = $("#content-scroll").prop("scrollWidth") - 
         $("#content-scroll").width(); 
        $("#content-scroll").prop('scrollLeft' ,ui.value * (maxScroll/100)); 
       } 
      }); 
     }); 
    </script>

出典

2011-11-04 Miu

をあなたはTBODYに高さとオーバーフロー-Yを設定してみてくださいましたか？ – Mottie

インライン垂直スクロールが必要な場合は＃content-overflow-x：hidden;に 'overflow：hidden'を変更し、そうでない場合は高さを高値に設定するかjqueryでチェックしてください:) –

@fudgey私のコードのどこにでもtbodyがあり、どのように役立つか分かりません。 – Miu

悲しいことに、私はそのテーブルライブラリとあまり慣れていないので、私はちょうど投げましたここではFireFoxで動作するものがあります（Kees Schepersがクロスブラウザーのスタイルを私が気にかけているよりもうまく処理していると確信しています）。

とにかく、重要な部分は、表（#t）の周りのdiv（#d）です。position:relative;です。これにより、スクロール#tではなく、#dに対して:first-child要素のposition:absolute;が有効になります。

サンプルHTML：

<html> 
<head> 
    <style type="text/css"> 
    #d { /*** Important part is here ***/ 
     position:relative; 
    } 
    #t { 
     display:block; 
     overflow-x:scroll; 
     overflow-y:visible; 
     width:412px; 
    } 
    #t tbody { 
     display:block; 
     margin-left:202px; 
    } 
    #t th, 
    #t td { 
     border:1px solid #000; 
    } 
    #t tr th:first-child, 
    #t tr td:first-child { 
     background:#FFF; 
     left:0; 
     position:absolute; 
     width:200px; 
    } 
    #t tr td div { 
     height:200px; 
     width:200px; 
    } 
    </style> 
</head> 
<body> 
    <div id="d"> 
     <table id="t" cell-padding="0" cell-spacing="0"> 
      <tr> 
       <th>head1</th> 
       <th>head2</th> 
       <th>head3</th> 
       <th>head4</th> 
      </tr> 
      <tr> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
      </tr> 
      <tr> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

希望いくつかのに役立ちます。

出典

2012-05-22 08:10:01 pieman72