如果可滚动div高于窗口，请将水平滚动条附加到窗口底部 [英] Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window

问题描述

我有一个div比窗口高，但包含在一定的宽度。这导致div在最底部得到一个水平滚动条。这个问题是，它使得用户难以在div中向左和向右滚动。

I have a div that is taller than the window but is contained within a certain width. This causes the div to get a horizontal scrollbar at the very bottom. The problem with this is it makes it hard for users to scroll left and right within the div.

我想知道是否可以附加一个滚动条到底部，直到用户向下滚动到div的底部。

I would like to know if it is possible to attach a scrollbar to the bottom of the screen until the user scrolls down to the bottom of the div.

为了让我们了解我想要完成的事情。 Codrops创建了一个漂亮的表，一旦你滚动过表头，它将自己附加到屏幕的顶部。以下是 http://tympanus.net/Tutorials/StickyTableHeaders/ 的演示。我想这样做，但使用滚动条附加到屏幕的底部。对不起，我不能提供我已经尝试过的东西，因为我甚至不知道从什么开始尝试这样做。

To give you an idea of what I would like to accomplish. Codrops created a nice table that once you scroll past the table header it attaches its self to the top of the screen. Here is the demo of that http://tympanus.net/Tutorials/StickyTableHeaders/. I want to do this but with a scrollbar attaching to the bottom of the screen. I am sorry I can't provide things I have tried, because I don't even know where to start when trying to accomplish this.

推荐答案

您可以创建与div相同宽度的空容器，并将其设置为固定位置。然后使用jQuery同步滚动这些2 DIV的位置。 jsFiddle上的示例。

You can create empty container with the same width as your div and set it to fixed position. Then sync scrolling position of these 2 DIVs using jQuery. Example on jsFiddle.

jQuery(function($){
    $('.content').on('scroll', function(){
        $('.scroller').scrollLeft($(this).scrollLeft());
    });
    $('.scroller').on('scroll', function(){
        $('.content').scrollLeft($(this).scrollLeft());
    });
});

隐藏/显示外部滚动条取决于页面滚动偏移为作为家庭作业留下：）

Hiding/showing external scrollbar depending on page scroll offset is left for you as homework :)

这篇关于如果可滚动div高于窗口，请将水平滚动条附加到窗口底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！