Question

我有一个高于屏幕高度的div，我想保留这个位，但是这个div底部还有一个水平滚动条，直到用户完全向下滚动这个滚动条才会看到，这有点儿了。您必须向下滚动，向右滚动，然后向上滚动以查看您需要的内容。所以我想知道是否有办法修复屏幕底部的底部滚动条，以便随时可供用户使用。

以下是两张用于演示我的问题的照片

我现在所拥有的：http://imageshack.us/a/img132/2087/38417747.png

我想如何看待它：http://imageshack.us/a/img267/7452/90387247.png

我打算使用jQuery自己设计一个滚动条，但我想知道如果没有这么多努力这是否可行。

示例：在这里：jsfiddle.net/jy3HK /

此外，请尝试回答我的问题而不进行修改。我希望我的应用程序尽可能自定义。已经有一个取消底部滚动的选项，但我也想添加此选项。谢谢。

Answer 1

这是非常可能的，但需要一个棘手的JS方法 - 据我所知，你的问题没有可能的CSS解决方案。

我在这里创造了一个小提琴 - http://jsfiddle.net/teddyrised/szuzk/，这或多或少是对你原始小提琴的概念验证修改，但在你离开之前，我恳求你首先理解我的方法:) / p>

您遇到的问题是滚动条位于滚动元素的底部，无论视口的高度如何。为了将滚动条带到视口的底部（而不是滚动元素），您必须调整元素的大小，使元素的底部始终位于视口的底部，而不是任何低位。

这是通过检测.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();
    });
});

这就是全部;）

Answer 2

我不知道为什么这些开发人员在使用 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>

你能修复屏幕上的滚动条吗？

2 个答案: