javascript - 从外部 div 滚动 div

Question

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

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>

旁注:如果您将表格显示设置为 block ，则不需要包装 div，除非您想要支持 IE8，而我就是这样做的。也许有办法解决这个问题，但那是另一个问题。

Answer 1

好吧，经过几个小时的 hacking 而没有运气，我决定剖析一些现有的库，看看它们是如何实现的。不幸的是我非常失望。他们都在使用 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;
}