从外部div中滚动div

Question

查看下面的小型html结构示例以了解上下文。看看这个fiddle的问题和例子。

为小提琴用户简短说明：

1. 向左滚动 - 垂直滚动条不可见
2. 向右滚动 - 垂直可视
3. 我想垂直滚动条始终可见
4. 要求 - 头必须保持固定（滚动时可见）

长解释：

我有一个固定标题和可滚动主体的表格。这种复杂性需要两张表格。这很好。在我的事业中，我也有可调整大小的栏目。 table-layout: fixed为了工作。这是问题出现。

为了使滚动正文工作，我有一个div来包装.rows表进行滚动。直到网格（特别是.rows表格）在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> 

侧面说明：如果设置表显示，除非你想支持IE8，我做块则不需要包装股利。也许有一种解决方法，但另一个问题是另一个问题。

Answer 1

经过几个小时的黑客攻击之后，我决定对现有的一些库进行检测，以了解它们是如何完成这些工作的。不幸的是我非常失望。他们都使用JavaScript。

这方面的优势在于它只需要一小段代码，并不意味着它的性能会很好。为了尽可能做到这一点，我需要在x方向上更新标题。由于这通常是我的情况下的一个小区域，应该足够好。

一百次的魅力！

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; 
} 

Answer 2

我编辑你的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; 
} 

Answer 3

这件怎么样，如果你要使用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); 

live demo

对不起，我从那里我得到它忘了。但特别感谢他/她。还有作者Jonas Mosbech。希望，它会帮助你。谢谢。 ！