0

我有一个高度大于屏幕的 div，我想保持原样，但是这个 div 在底部还有一个水平滚动条，直到用户一直向下滚动，这个滚动条才可见，并且这个有点奇怪。您必须向下滚动，向右滚动，然后向上滚动以查看您需要的内容。所以我想知道是否有办法修复屏幕底部的底部滚动条，以便用户随时可以使用它。

这是两个打印件来证明我的问题

我现在拥有的：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事件并随后在旅途中重新计算元素高度来完成的。但是，这也意味着该元素不会占用原本预期的 1500 像素高度 - 因此我们创建了一个环绕元素并将该高度分配给它。

$(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

我不知道为什么这些开发人员在处理 CSS 时总是给出一个大代码，如下所示：-

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 回答