0

我创造了

css

.tablescroll_wrapper
{ border-left:1;border-top:0; overflow-y:scroll; overflow-x:visible; width:1320px;height:300px;}

jQuery

;(function($){

    var scrollbarWidth = 0;

    // http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
    function getScrollbarWidth() 
    {
        if (scrollbarWidth) return scrollbarWidth;
        var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');
        $('body').append(div); 
        var w1 = $('div', div).innerWidth(); 
        div.css('overflow-y', 'auto');
        var w2 = $('div', div).innerWidth(); 
        $(div).remove(); 
        scrollbarWidth = (w1 - w2);
        return scrollbarWidth;
    }

    $.fn.tableScroll = function(options)
    {
        if (options == 'undo')
        {
            var container = $(this).parent().parent();
            if (container.hasClass('tablescroll_wrapper')) 
            {
                container.find('.tablescroll_head thead').prependTo(this);
                container.find('.tablescroll_foot tfoot').appendTo(this);
                container.before(this);
                container.empty();
            }
            return;
        }

        var settings = $.extend({},$.fn.tableScroll.defaults,options);

        // Bail out if there's no vertical overflow
        if ($(this).height() <= settings.height)
        {
          return this;
        }

        settings.scrollbarWidth = getScrollbarWidth();

        this.each(function()
        {
            var flush = settings.flush;

            var tb = $(this).addClass('tablescroll_body');

            // find or create the wrapper div (allows tableScroll to be re-applied)
            var wrapper;
            if (tb.parent().hasClass('tablescroll_wrapper')) {
                wrapper = tb.parent();
            }
            else {
                wrapper = $('<div class="tablescroll_wrapper"></div>').insertBefore(tb).append(tb);
            }

            // check for a predefined container
            if (!wrapper.parent('div').hasClass(settings.containerClass))
            {
                $('<div></div>').addClass(settings.containerClass).insertBefore(wrapper).append(wrapper);
            }

            var width = settings.width ? settings.width : tb.outerWidth();

            wrapper.css
            ({
                'width': width+'px',
//              'height': 300+'px',
                'height': settings.height+'px',
                'overflow': 'auto'
            });

            tb.css('width',width+'px');

            // with border difference
            var wrapper_width = wrapper.outerWidth();
            var diff = wrapper_width-width;

            // assume table will scroll
            wrapper.css({width:((width-diff)+settings.scrollbarWidth)+'px'});
            tb.css('width',(width-diff)+'px');

            if (tb.outerHeight() >= settings.height)
            {
                wrapper.css({height:'auto',width:(width-diff)+'px'});
//              wrapper.css({height:'300',width:(width-diff)+'px'});
                flush = false;
            }

            // using wrap does not put wrapper in the DOM right 
            // away making it unavailable for use during runtime
            // tb.wrap(wrapper);

            // possible speed enhancements
            var has_thead = $('thead',tb).length ? true : false ;
            var has_tfoot = $('tfoot',tb).length ? true : false ;
            var thead_tr_first = $('thead tr:first',tb);
            var tbody_tr_first = $('tbody tr:first',tb);
            var tfoot_tr_first = $('tfoot tr:first',tb);

            // remember width of last cell
            var w = 0;

            $('th, td',thead_tr_first).each(function(i)
            {
                w = $(this).width();

                $('th:eq('+i+'), td:eq('+i+')',thead_tr_first).css('width',w+'px');
                $('th:eq('+i+'), td:eq('+i+')',tbody_tr_first).css('width',w+'px');
                if (has_tfoot) $('th:eq('+i+'), td:eq('+i+')',tfoot_tr_first).css('width',w+'px');
            });

            if (has_thead) 
            {
                var tbh = $('<table class="tablescroll_head" cellspacing="0"></table>').insertBefore(wrapper).prepend($('thead',tb));
            }

            if (has_tfoot) 
            {
                var tbf = $('<table class="tablescroll_foot" cellspacing="0"></table>').insertAfter(wrapper).prepend($('tfoot',tb));
            }

            if (tbh != undefined)
            {
                tbh.css('width',width+'px');

                if (flush)
                {
                    $('tr:first th:last, tr:first td:last',tbh).css('width',(w+settings.scrollbarWidth)+'px');
                    tbh.css('width',wrapper.outerWidth() + 'px');
                }
            }

            if (tbf != undefined)
            {
                tbf.css('width',width+'px');

                if (flush)
                {
                    $('tr:first th:last, tr:first td:last',tbf).css('width',(w+settings.scrollbarWidth)+'px');
                    tbf.css('width',wrapper.outerWidth() + 'px');
                }
            }
        });

        return this;
    };

    // public
    $.fn.tableScroll.defaults =
    {
        flush: true, // makes the last thead and tbody column flush with the scrollbar
        width: null, // width of the table (head, body and foot), null defaults to the tables natural width
        height: 100, // height of the scrollable area
        containerClass: 'tablescroll' // the plugin wraps the table in a div with this css class
    };

})(jQuery);

当我在浏览器中检查结果是：

<div class="tablescroll_wrapper" style="height: auto; overflow: auto; width: 1361px;">

我想只添加水平滚动条我该怎么做，谁能帮我解决这个问题？

谢谢你，乌德西卡

4

2 回答 2

1

在您的代码中，您设置了包装器 CSS：

wrapper.css
        ({
            'width': width+'px',
//          'height': 300+'px',
            'height': settings.height+'px',
            'overflow': 'auto'
        });

结果和预期的一样：

<div class="tablescroll_wrapper" style="height: auto; overflow: auto; width: 1361px;">

如果你只想要水平滚动条，你需要确保你的 CSS 是这样的：

overflow-y:visible; overflow-x:scroll;

因此，您的包装器代码应如下所示。

wrapper.css
        ({
            'width': width+'px',
            'height': settings.height+'px',
            'overflow-x': 'scroll',
            'overflow-y': 'visible'
        });
于 2013-05-09T11:22:45.010 回答
0

然后你会希望你的 CSS 是：

overflow-y:visible; overflow-x:scroll;

x是水平的；y是垂直的。

于 2013-05-09T11:20:40.623 回答