Javascript 如何获取可滚动的div元素以滚动已设置为在行不可见时通过箭头键选择的行？

我有一个固定高度的div，

overflow-y

设置为

scroll

在这个div中有一个表，其中的行（即，

s）是“可选择的”（即，它们通过一些使用css的jQuery突出显示[这已经设置好并包含在下面粘贴的代码中]）

除此之外，我还添加了通过键盘上的上下箭头向上和向下移动的功能（这也已经起作用，并包含在下面的代码中）

当然，我遇到的问题是，当用户上下滚动（通过键盘上的上下箭头键）时，当所选行超出可见范围时，窗口（即可滚动的

）不会与所选行一起滚动

当用户向下或向上箭头指向表中的行并且这些行不在视图中时，如何使

的滚动条与当前选择的

一起滚动

以下是迄今为止所有功能的相关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#表示内部值）：

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

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

以下是我已经签出的几个链接：

---

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

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

  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;
    }
  }

函数scrollElementUp（）{ var childElement=/*获取要滚动的tr*/ var parentElement=/*使用滚动条获取容器*/ 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 我只是检查您想要滚动的元素的底部是否低于滚动容器的底部（与顶部滚动相反）。如果是，我移动scrollTop的量等于要滚动到的元素的高度

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;
}

  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;
    }
  }