0

高さが画面よりも大きい div があり、このビットをそのままにしたいのですが、この div には下部に水平スクロールバーもあり、これはユーザーが完全に下にスクロールするまで表示されません。は少し奇妙です。下にスクロールし、右にスクロールしてから上にスクロールして、必要なものを確認する必要があります。そのため、ユーザーがいつでも利用できるように、画面の下部にある下部スクロールバーを修正する方法があるかどうか疑問に思っていました。

ここに私の問題を示すための2つのプリントがあります

私が今持っているもの: http://imageshack.us/a/img132/2087/38417747.png

どのように見せたいか: http://imageshack.us/a/img267/7452/90387247.png

jQueryを使用して自分でスクロールバーを設計するつもりでしたが、これほどの労力をかけずに実行できるかどうかを知りたい.

例: どうぞ: jsfiddle.net/jy3HK/

また、変更せずに私の質問に答えてみてください。アプリケーションを可能な限りカスタマイズ可能にしたい。下スクロールをキャンセルするオプションはすでにありますが、これも追加したいと思います。ありがとうございました。

4

2 に答える 2

1

それは非常に可能ですが、トリッキーなJSアプローチが必要です-私が推測できる限り、あなたの質問に対する可能なCSSソリューションはありません.

ここでフィドルを作成しました - http://jsfiddle.net/teddyrised/szuzk/、これは多かれ少なかれ、元のフィドルの概念実証の変更ですが、出発する前に、私のアプローチを理解してください。最初 ：）

あなたが抱えている問題は、ビューポートの高さに関係なく、スクロールバーがスクロール要素の一番下にあることです。スクロールバーを (スクロール要素ではなく) ビューポートの下部に移動するには、要素の下部がビューポートの下部ではなく常に下部になるように、要素のサイズを変更する必要があります。

これは、.scrollイベントを検出し、続いて外出先で要素の高さを再計算することによって行われます。ただし、これは要素が意図した元の 1500px の高さを占有しないことも意味します。そのため、ラップアラウンド要素を作成し、その高さをそれに割り当てます。

$(document).ready(function () {
    // Create wrap around element
    $('#big').wrap('<div id="scroll-wrap" />');

    // Function: resize element when scrolling
    function recalcHeight() {
         $('#big').css({
             'height': $(window).height() + $(window).scrollTop() - $('#big').offset().top
         });       
    }

    // Resize wrap around element upon resize
    $(window).resize(function () {
        $('#scroll-wrap').css({
            'height': $('#big').css('max-height')
        });
    }).resize(); // Fires resize() event onload

    // Recalculate height upon load, and upon scroll
    recalcHeight();
    $(window).scroll(function () {
        recalcHeight();
    });
});

それで全部です ;）

于 2013-04-20T11:59:39.623 に答える
-1

I Don't know why these developer always gives a large code while it has been handle with CSS like this:-

div.table-responsive {
   max-height: 100%;
   overflow: auto;
}
table {
  height: 450px;
}
<div class="table-responsive">
   <table>
     <tbody>
       <tr>
          <td></td>
       </tr>
     </tbody>
    </table>
</div>
于 2021-02-23T05:35:37.767 に答える