如何自定义 Web 容器中滚动条的位置

Question

目前，我正在尝试创建一个数据网格，允许用户单击 ColA 中的项目，右侧屏幕将显示另一个包含详细信息的隐藏容器。

我有一个固定高度的 div，其中包含一个表格作为我的数据网格，并且因为“溢出”设置为“自动”，它会在 div 的右侧有一个滚动条，允许用户滚动整个数据网格。 （见下图）

但是，就我而言，我想将滚动条移动到“colA”旁边，并且仍然允许用户滚动整个数据网格。 （见下图）

现在，我可以将滚动条放在 ColA 旁边，因为我在那里定义了另一个固定高度 div 并将“溢出”设置为“自动”，但当然，这只允许我只滚动 ColA。

这是我的问题：

1. 是否可以通过一些 CSS 设置来满足我的要求？
2. 如果 1 的答案是否定的，我可以通过为 colA 滚动条创建事件处理程序来实现我的目标吗？ （能否提供一些示例代码？）
3. 如果1的答案是否定的，有没有开源工具可以支持这种需求？

=============== 这是表格部分的代码（删除了不相关的样式）===========

<td colspan="2">
<div style="height: 200px; overflow: auto; margin: 1px;">
    <table>
        <tr>
        <td>
            <table>
            <tr><td><p> data Item 1</p></td></tr>
            <tr><td><p> data Item 2</p></td></tr>
            <tr><td><p> data Item 3</p></td></tr>
            <tr><td><p> data Item 4</p></td></tr>
            </table>
        </td>
        <td>
            <table>
            <tr>
            <td><p> related item 1</p></td>
            <td><p> related item 1</p></td>
            <td><p> related item 1</p></td>
            </tr>
            <tr>
            <td><p> related item 2</p></td>
            <td><p> related item 2</p></td>
            <td><p> related item 2</p></td>
            </tr>
            <tr>
            <td><p> related item 3</p></td>
            <td><p> related item 3</p></td>
            <td><p> related item 3</p></td>
            </tr>
            <tr>
            <td><p> related item 4</p></td>
            <td><p> related item 4</p></td>
            <td><p> related item 4</p></td>
            </tr>
            </table>
            </td>
        </tr>
    </table>
</div>

非常感谢任何帮助。

Answer 1

将滚动条放在 a 列上，然后您可以像这样更改 b 列的滚动位置：

var setScrollHeight = function(e){
    colA = $(".col-a")[0];
    colB = $(".col-b")[0];

    console.log(e);
    var scrollPercent = colA.scrollTop / (colA.scrollHeight - parseInt(colA.clientHeight));

    if(e.originalEvent.deltaY !== undefined && e.originalEvent.target != colA)
        scrollPercent += e.originalEvent.deltaY < 0 ? -0.16 : 0.16; 

    colA.scrollTop = (colA.scrollHeight - colA.clientHeight) * scrollPercent;
    colB.scrollTop = (colB.scrollHeight - colB.clientHeight) * scrollPercent;
}

$(".col-a").scroll( setScrollHeight);
$(".container").on("mousewheel DOMMouseWheel onmousescroll", setScrollHeight);

在这里查看：JSFiddle

更新：默认滚动条现在可以使用了

Answer 2

这是你能做的最多的事情：

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

<h1>Normal</h1>
<div class="Container">
    <div class="Content"></div>
</div>

<h1>Flipped</h1>
<div class="Container Flipped">
    <div class="Content"></div>
</div>