在表的底部的稠粘的滚动条 [英] Sticky scrollbar at bottom of table

问题描述

我不知道sticky是否是这个术语，但是有一种方法让滚动条从 overflow：auto 保持可见？

我有一个相当大的表，我想水平滚动;但是，表格也相当高，所以当页面加载时，水平滚动条不在浏览器的视口之内，所以很难说该表是可滚动的。

 < div style ='width：900px; overflow：auto'> 
< table> 
<！ - 非常大的表格 - > 
< / table> 
< / div> 
  

滚动条显示在表格下方，但不幸的是，表格太高，除非你向下滚动。

我想让水平滚动条保持可见，即使表格离开屏幕，也许固定在视口底部。

解决方案

这里是一个脚本为< a href =http://jsfiddle.net/TBnqw/2288/ =nofollow> http://jsfiddle.net/TBnqw/2288/

  $（function（$）{
 var scrollbar = $（'< div id =fixed-scrollbar> ; div>< / div>< / div>'）appendTo（$（document.body））; 
 scrollbar.hide（）。css（{
 overflowX：'auto'，
 position：'fixed'，
 width：'100％'，
 bottom：0 
}）; 
 var fakecontent = scrollbar.find（'div'）; 
 
 function top（e）{
 return e.offset（）。top; 
} 
 
函数bottom（e）{
 return e.offset（）。top + e.height（）; 
} 
 
 var active = $（[]）; 
 function find_active（）{
 scrollbar.show（）; 
 var active = $（[]）; 
 $（'。fixed-scrollbar' ）） top（scrollbar）&& bottom（$（this））> bottom（scrollbar））{
 fakecontent.width（$（this）.get（0）.scrollWidth）; 
 fakecontent.height（1）; 
 active = $（this）; 
} 
}）; 
 fit（active）; 
 return active; 
} 
 
 function fit（active）{
 if（！active.length）return scrollbar.hide（）; 
 scrollbar.css（{left：active.offset（）。left，width：active.width（）}）; 
 fakecontent.width（$（this）.get（0）.ScrollWidth）; 
 fakecontent.height（1）; 
 delete lastScroll; 
} 
 
 function onscroll（）{
 var oldactive = active; 
 active = find_active（）; 
 if（oldactive.not（active）.length）{
 oldactive.unbind（'scroll'，update）; 
} 
 if（active.not（oldactive）.length）{
 active.scroll（update）; 
} 
 update（）; 
} 
 
 var lastScroll; 
 function scroll（）{
 if（！active.length）return; 
 if（scrollbar.scrollLeft（）=== lastScroll）return; 
 lastScroll = scrollbar.scrollLeft（）; 
 active.scrollLeft（lastScroll）; 
} 
 
 function update（）{
 if（！active.length）return; 
 if（active.scrollLeft（）=== lastScroll）return; 
 lastScroll = active.scrollLeft（）; 
 scrollbar.scrollLeft（lastScroll）; 
} 
 
 scrollbar.scroll（scroll）; 
 
 onscroll（）; 
 $（window）.scroll（onscroll）; 
 $（window）.resize（onscroll）; 
}）; 
  

这是一个快速测试而不是一个完整的通用插件， / p>

I'm not sure if "sticky" is the term for this, but is there a way to make the scrollbar from overflow:auto stay visible?

I have a rather large table that I want to be scrollable horizontally; however, the table is fairly tall as well, so when the page loads the horizontal scrollbar is not within the viewport of the browser, so it's rather hard to tell that the table is scrollable at all.

<div style = 'width:900px;overflow:auto'>
    <table>
        <!-- Very large table here -->
    </table>
</div>

The scroll bar appears below the table, but unfortunately the table is so tall you can't see it unless you scroll down.

I'd like to have the horizontal scrollbar stay visible even if the table goes off the screen, maybe fixed to the bottom of the viewport. Ideally I'd like to do it using only CSS or a minimal amount of javascript.

解决方案

Here is a script for that http://jsfiddle.net/TBnqw/2288/

$(function($){
    var scrollbar = $('<div id="fixed-scrollbar"><div></div></div>').appendTo($(document.body));
    scrollbar.hide().css({
        overflowX:'auto',
        position:'fixed',
        width:'100%',
        bottom:0
    });
    var fakecontent = scrollbar.find('div');

    function top(e) {
        return e.offset().top;
    }

    function bottom(e) {
        return e.offset().top + e.height();
    }

    var active = $([]);
    function find_active() {
        scrollbar.show();
        var active = $([]);
        $('.fixed-scrollbar').each(function() {
            if (top($(this)) < top(scrollbar) && bottom($(this)) > bottom(scrollbar)) {
                fakecontent.width($(this).get(0).scrollWidth);
                fakecontent.height(1);
                active = $(this);
            }
        });
        fit(active);
        return active;
    }

    function fit(active) {
        if (!active.length) return scrollbar.hide();
        scrollbar.css({left: active.offset().left, width:active.width()});
        fakecontent.width($(this).get(0).scrollWidth);
        fakecontent.height(1);
        delete lastScroll;
    }

    function onscroll(){
        var oldactive = active;
        active = find_active();
        if (oldactive.not(active).length) {
            oldactive.unbind('scroll', update);
        }
        if (active.not(oldactive).length) {
            active.scroll(update);
        }
        update();
    }

    var lastScroll;
    function scroll() {
        if (!active.length) return;
        if (scrollbar.scrollLeft() === lastScroll) return;
        lastScroll = scrollbar.scrollLeft();
        active.scrollLeft(lastScroll);
    }

    function update() {
        if (!active.length) return;
        if (active.scrollLeft() === lastScroll) return;
        lastScroll = active.scrollLeft();
        scrollbar.scrollLeft(lastScroll);
    }

    scrollbar.scroll(scroll);

    onscroll();
    $(window).scroll(onscroll);
    $(window).resize(onscroll);
});

It is a quick test rather than a complete generic plugin, but is a good start, I think

这篇关于在表的底部的稠粘的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！