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

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 解决方案来解决你的问题。

我在这里创建了一个 fiddle - http://jsfiddle.net/teddyrised/szuzk/ ，这或多或少是对你原来的 fiddle 的概念验证修改，但在你离开之前，我恳请你先理解我的方法:)

您遇到的问题是滚动条位于滚动元素的底部，与视口(viewport)的高度无关。为了将滚动 strip 到视口(viewport)的底部(而不是滚动元素)，您必须调整元素的大小，使元素的底部始终位于视口(viewport)的底部，而不是更低。

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

就是这样;)