javascript - 如何在 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

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