logo标签列表

从外部div滚动内部div

javascripthtmlcss
5
请查看下面的小型html结构示例以了解上下文。查看这个fiddle，了解问题的示例。
对于fiddle用户的简短说明：
  1. 向左滚动-垂直滚动条不可见
  2. 向右滚动-垂直可见
  3. 我希望垂直滚动条始终可见
  4. 要求-标题必须保持固定（在滚动时可见）
长说明： 我有一个带有固定标题和可滚动正文的表格。这需要两个表格来完成。这很好。在我的情况下，我还有可调整大小的列。对于此工作，需要使用“table-layout：fixed”。这就是问题出现的地方。
为了使滚动的正文工作，我有一个包装“行”表格进行滚动的div。这很好，直到网格，特别是“行”表格，在x方向上溢出。在这种情况下，只有当网格全部向右滚动时，垂直滚动条才可见。因为滚动条位于“row-wrapper”div上。并且该溢出被“grid”div隐藏。我希望滚动条位于“grid-canvas”div上，以便即使向左滚动也可见。
<div class=grid>
    <div class=grid-canvas>
        <table class=header></table>
        <div class=row-wrapper>
            <table class=rows></table>
        </div>
    </div>
</div>

旁注：如果您将表格显示设置为块，则不需要包装 div，除非您想支持 IE8（我需要）。也许有一个解决方法，但那是另一个时间的问题。

这是一个很好的例子，展示了如何完成它： http://www.imaputz.com/cssStuff/bigFourVersion.html - Breezer
这基本上做的和我得到的一样。然而问题仍然存在。tbody 上设置了 overflow，所以滚动发生在 tbody 上。当表格宽度大于容器宽度时，你会看到相同的问题。除非你向右滚动到底，否则垂直滚动条是不可见的。fiddle - ralphinator80
3个回答
2

经过数小时的尝试仍无法成功攻破，我决定剖析一些现有的库以了解它们是如何完成这个任务的。不幸的是，我非常失望。它们全部都在使用 JavaScript。

好处在于只需要少量的代码，但这并不意味着它能够很好地执行。为了使其尽可能地高效执行，我将在 x 方向上根据需要更新标题。由于在我的情况下这通常只涉及到一个小区域，所以应该已经足够了。

第 100 次尝试终于成功了！

fiddle

以下是基本信息：

HTML

<div class=grid>
    <div class=grid-canvas>
        <div class=header-wrapper>
            <table class=header></table>
        </div>
        <div class=row-wrapper>
          <table class=rows></table>
        </div>
    </div>
</div>

JavaScript
$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
    $headerDiv.css({
        left: -$rowDiv[0].scrollLeft + 'px'
    });
});​

CSS

.grid {
  height: 500px;
  width: 350px;
}

.grid-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.header-wrapper {
  position: absolute;
  top: 0;
  width: auto;
  background-color: white;
  z-index: 1;
}

.row-wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
  padding-top: 18px;
  background-color: lightgreen;
}

th, td {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

​

为了让它在IE中正常工作，我不得不做出一些更改。我的答案在IE中的问题是滚动条将被隐藏在标题div下面。这在我使用的其他浏览器中并不明显，因为滚动条是透明的，仍然位于标题的顶部。这是fiddle。 - ralphinator80
1
这个怎么样，如果你想使用JavaScript/jQuery？
$(function(){
    $("table").stickyTableHeaders();
});

/*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
    MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */

;(function ($, window, undefined) {
    'use strict';

    var pluginName = 'stickyTableHeaders';
    var defaults = {
            fixedOffset: 0
        };

    function Plugin (el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Cache DOM refs for performance reasons
        base.$window = $(window);
        base.$clonedHeader = null;
        base.$originalHeader = null;

        // Keep track of state
        base.isCloneVisible = false;
        base.leftOffset = null;
        base.topOffset = null;

        base.init = function () {
            base.options = $.extend({}, defaults, options);

            base.$el.each(function () {
                var $this = $(this);

                // remove padding on <table> to fix issue #7
                $this.css('padding', 0);

                $this.wrap('<div class="divTableWithFloatingHeader"></div>');

                base.$originalHeader = $('thead:first', this);
                base.$clonedHeader = base.$originalHeader.clone();

                base.$clonedHeader.addClass('tableFloatingHeader');
                base.$clonedHeader.css({
                    'position': 'fixed',
                    'top': 0,
                    'z-index': 1, // #18: opacity bug
                    'display': 'none'
                });

                base.$originalHeader.addClass('tableFloatingHeaderOriginal');

                base.$originalHeader.after(base.$clonedHeader);

                // enabling support for jquery.tablesorter plugin
                // forward clicks on clone to original
                $('th', base.$clonedHeader).click(function (e) {
                    var index = $('th', base.$clonedHeader).index(this);
                    $('th', base.$originalHeader).eq(index).click();
                });
                $this.bind('sortEnd', base.updateWidth);
            });

            base.updateWidth();
            base.toggleHeaders();

            base.$window.scroll(base.toggleHeaders);
            base.$window.resize(base.toggleHeaders);
            base.$window.resize(base.updateWidth);
        };

        base.toggleHeaders = function () {
            base.$el.each(function () {
                var $this = $(this);

                var newTopOffset = isNaN(base.options.fixedOffset) ?
                    base.options.fixedOffset.height() : base.options.fixedOffset;

                var offset = $this.offset();
                var scrollTop = base.$window.scrollTop() + newTopOffset;
                var scrollLeft = base.$window.scrollLeft();

                if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height())) {
                    var newLeft = offset.left - scrollLeft;
                    if (base.isCloneVisible && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) {
                        return;
                    }

                    base.$clonedHeader.css({
                        'top': newTopOffset,
                        'margin-top': 0,
                        'left': newLeft,
                        'display': 'block'
                    });
                    base.$originalHeader.css('visibility', 'hidden');
                    base.isCloneVisible = true;
                    base.leftOffset = newLeft;
                    base.topOffset = newTopOffset;
                }
                else if (base.isCloneVisible) {
                    base.$clonedHeader.css('display', 'none');
                    base.$originalHeader.css('visibility', 'visible');
                    base.isCloneVisible = false;
                }
            });
        };

        base.updateWidth = function () {
            // Copy cell widths and classes from original header
            $('th', base.$clonedHeader).each(function (index) {
                var $this = $(this);
                var $origCell = $('th', base.$originalHeader).eq(index);
                this.className = $origCell.attr('class') || '';
                $this.css('width', $origCell.width());
            });

            // Copy row width from whole table
            base.$clonedHeader.css('width', base.$originalHeader.width());
        };

        // Run initializer
        base.init();
    }

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
            }
        });
    };

})(jQuery, window);

现场演示

抱歉，我忘记了它来自哪里。但特别感谢他/她。还有作者 Jonas Mosbech。 希望能对您有所帮助。谢谢！

-1

我编辑了你的CSS，猜测这就是你想要的：

table {
  table-layout: fixed;
}

th, td {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid {
  height: 500px;
  width: 350px;

  overflow-x: auto;
  overflow-y: scroll;
}

.grid-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.header {
  position: absolute;
  top: 0;
  background-color: white;
  z-index: 10;
}

.row-wrapper {
  position: absolute;
  top: 0;
  width: auto;
  height: auto;
  /* assumed height of the header */
  padding-top: 18px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: lightgreen;
}
头部网格在这种情况下不再固定。 即当您向下滚动时，标题栏不再可见。 - ralphinator80
@user1447420：无论您是垂直还是水平滚动，页眉都应保持固定，但这不是可能的解决方案。 - immayankmodi
我认为在我回答之后你添加了第四部分。当我回答时，只有三个规则。 - user1447420
是的，我做了。我添加了第四部分以便更清晰地表达。在看到你的回复后。 - ralphinator80
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接