从外部 div 滚动 div

Question

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

小提琴用户的简短说明：

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

长解释：

我有一个带有固定标题和可滚动正文的表格。其复杂性需要两个表。这一切都很好。在我的事业中，我也有可调整大小的列。table-layout: fixed让它工作。这是出现问题。

为了使滚动体工作，我有一个 div 来包装.rows表格以进行滚动。这很好用，直到网格，特别是.rows表格，在 x 方向溢出。在这种情况下，垂直滚动条只有在网格一直向右滚动时才可见。因为滚动条在.row-wrapperdiv上。这个溢出被.griddiv隐藏了。我希望滚动条位于.grid-canvasdiv上，这样即使滚动到左侧也能看到它。

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

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

Answer 1

经过几个小时的黑客攻击但没有成功后，我决定剖析一些现有的库，看看它们是如何实现这一目标的。不幸的是我非常失望。他们都使用了 javascript。

\n\n

这样做的好处是它只需要少量代码，但这并不意味着它会表现良好。为了使此操作尽可能好，我将在 x 方向需要时更新标头。由于在我的情况下这通常是一个小区域，因此应该足够好了。

\n\n

魅力百倍！

\n\n

小提琴

\n\n

这是基本的：

\n\n

超文本标记语言

\n\n

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

\n\n

JavaScript

\n\n

$headerDiv = $(\'.header-wrapper\');\n$rowDiv = $(\'.row-wrapper\');\n$rowDiv.scroll(function(e) {\n    $headerDiv.css({\n        left: -$rowDiv[0].scrollLeft + \'px\'\n    });\n});\xe2\x80\x8b\n

\n\n

CSS

\n\n

.grid {\n  height: 500px;\n  width: 350px;\n}\n\n.grid-canvas {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.header-wrapper {\n  position: absolute;\n  top: 0;\n  width: auto;\n  background-color: white;\n  z-index: 1;\n}\n\n.row-wrapper {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  overflow: auto;\n  padding-top: 18px;\n  background-color: lightgreen;\n}\n\nth, td {\n  width: 80px;\n  min-width: 80px;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n

\n\n

\xe2\x80\x8b

\n