Question

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

我有一个固定的高度div，它将一个表格作为我的数据网格，并且因为溢出了＆＃39;设置为＆＃39; auto＆＃39;，它将在div的右侧有一个滚动条，允许用户滚动整个数据网格。（见下图） enter image description here

但是，在我的情况下，我想移动＆＃39; colA＆＃39;旁边的滚动条。并且仍然允许用户滚动整个数据网格。（见下图） enter image description here

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

以下是我的问题：

是否可以通过一些CSS设置满足我的要求？
如果1的答案为否，我可以通过为colA滚动条创建事件处理程序来实现我的目标吗？（你能提供一些示例代码吗？）
如果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

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

＆＃13;

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

＆＃13;

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

＆＃13;

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

2 个答案: