当行不在视图中时，如何让可滚动的 div 元素与已设置为通过箭头键选择的行一起滚动？

Question

我有一个固定高度的 div， overflow-y设置为scroll

在这个 div 中有一个表格，其中的行（即<tr> s）是“可选择的”（即，它们突出显示了一些使用 css 的 jQuery [这已经设置并包含在我粘贴在下面的代码中] ）。

为此，我还添加了通过键盘上的上下箭头上下移动的功能（这也已经可以使用并包含在下面的代码中）。

当然，我遇到的问题是，当用户向上和向下滚动（通过键盘上的向上和向下箭头键）时，窗口（即可滚动的<div> ）不会随所选内容滚动当行超出可见范围时。

当用户向下或向上箭头表行并且这些行不在视图中时，如何让<div>的滚动条与当前选择的<tr>一起滚动？

这是迄今为止所有功能的相关jquery：

////**********GLOBAL VARIABLES*********//////
var clientRowHighlighted = false;
////**********global variables*********//////

function bindArrows() {
    $(document).keydown(function (e) {
        if (clientRowHighlighted) {
            switch (e.which) {
                case 38: //up
                    $("#selected").prev().click();
                    if (!isScrolledIntoView($("#selected"))) {
                        scrollToView($("#selected"));
                    }
                    break;

                case 40: //down
                    $("#selected").next().click();
                    if (!isScrolledIntoView($("#selected"))) {
                        scrollToView($("#selected"));
                    }
                    break;

                default: return; //exit this handler for other key presses
            }
            e.preventDefault(); //prevent the default action (scroll / move caret)
        }
    });
}

function bindClientSearchRows() {
        $(".selectable").click(function () {
            $(".selectable").attr('id', '');
            $(this).attr('id', 'selected');
            $(".selectable").css("background-color", "initial");
            $(this).css("background-color", "#57b7ff");
            var cn = $(this).children().first().text();
            $("#trackedClientNumber").val(cn);
            clientRowHighlighted = true;
            fillCSTStep1(cn); //This function is irrelevant to this StackOverflow question.
        });
}

html 中表格本身的简短示例（使用一些 C# 作为内部值）：

<div id="clientSearchList" class="clientInfoWrapper">
    <table id="clientsFound" class="clientSearchTable">
        @foreach (var row in db.Query(queryAll))
        {
            <tr class="selectable">
                <td class="clientNumber">@row.ClientNumber</td>
                <td class="clientName">@row.CompanyName</td>
                <td class="clientAddress">@row.CompanyAddress</td>
                <td class="clientCity">@row.CompanyCity</td>
                <td class="clientState">@row.CompanyState</td>
                <td class="clientZip">@row.CompanyZip</td>
                <td class="clientMarket">@row.Market</td>
                <td class="clientActive">
                    @if (row.ClientActive == true)
                    {
                        clientActive = "Yes";
                    }
                    else if (row.ClientActive == false)
                    {
                        clientActive = "No";
                    }
                    else
                    {
                        clientActive = row.ClientActive;
                    }
                    @clientActive
                </td>
            </tr>
        }
    </table>
</div>

最后，一些相关的 CSS：

tr.selectable
{
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.clientInfoWrapper
{
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 2px inset #888;
    background-color: #dcf8f4; /*Default Solid Background Color (Lighter Color)*/
    /* Opera 11.10+ */
    background: -o-linear-gradient(bottom, #aaeee5, #dcf8f4); /*Bottom-Top*/
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(bottom, #aaeee5, #dcf8f4); /*Bottom-Top*/
    /* Chrome 7+ & Safari 5.03+ */
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #aaeee5), color-stop(1, #dcf8f4)); /*Bottom-Top*/
    /* Newer Browsers */
    background: linear-gradient(bottom, #aaeee5, #dcf8f4); /*Bottom-Top*/
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#dcf8f4,EndColorStr=#aaeee5)"; /*Top-Bottom*/
    /* IE5.5 - IE7 */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#dcf8f4,EndColorStr=#aaeee5); /*Top-Bottom*/
}

.clientSearchTable
{
    white-space: nowrap;
    table-layout: fixed;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

我会添加更多的 CSS，但我想我已经添加了所有相关的内容，我不想不必要地膨胀这个页面，但如果需要更多，请询问。

我已经在 Stack Overflow 上搜索了一些可能已经存在的相关答案，虽然我找到的答案对我在这里试图驯服的野兽的性质非常有用，但我无法让它们完全满足我的需求.

以下是我已经检查过的几个链接：

滚动后如何检查元素是否可见？

如果元素不可见则滚动

添加使用向上和向下箭头键选择表格行的功能

但似乎这些答案都不适用于我正在尝试做的事情。

Answer 1

这段代码是我在当前项目中用来滚动可以用箭头键突出显示的容器的代码：

  function scrollElementUp() {
    var childElement = /*get the tr you want to scroll somehow*/
    var parentElement = /*get the container with the scrollbar*/
    var parentClientRect = parentElement.getBoundingClientRect();
    var parentBottom = parentClientRect.bottom;
    var parentTop = parentClientRect.top;

    var childRect = childElement.getBoundingClientRect();
    var childBottom = childRect.bottom;
    var childTop = childRect.top;
    if(childBottom > parentBottom) {
      parentElement.scrollTop += childRect.height;
    }
    if(childTop < parentTop) {
      parentElement.scrollTop -= childRect.height;
    }
  }

我只是检查您要滚动的元素的底部是否低于滚动容器的底部（与顶部向上滚动时相反）。 如果是，我将 scrollTop 移动的量等于我想要滚动到的元素的高度。