使用 JS 水平滚动 HTML 表格

Question

我将如何使用JS将HTML表水平滚动到指定的列，我的表上有overflow: scroll;，我想知道我是否可以执行以下操作：

myTable.scrollToColumn(column_ID_or_something_here);

Answer 1

您可以使用scrollIntoView

document.getElementById("column_ID_or_something_here").scrollIntoView(true);

如果scrollIntoView以某种方式破坏了 DOM，请使用focus()方法。这里的关键点是，如果元素没有tabindex首先你需要添加它。
在您的案例表中，表列可能没有 tabindex，代码将是：

element.setAttribute('tabindex', '999'); 
element.focus();

如果你需要这个Selenium这里的代码(Java(：

((JavascriptExecutor) driver).executeScript("arguments[0].setAttribute('tabindex', '999'); arguments[0].focus();", seleniumElement);

Answer 2

首先，使用 document.getElementsByClassName("class_name"([n] 从该列中获取任何一个元素。 应用 getBoundingClientRect(( 方法将为您提供元素相对于其在屏幕上的位置的左右属性，如下所示：

document.getElementsByClassName("class_name")[n].getBoundingClientRect().left
document.getElementsByClassName("class_name")[n].getBoundingClientRect().right

如果左为负数，则必须向右滚动，否则必须向左滚动。

table_Element.scrollBy (x， y( 将帮助您滚动表格。 将 y 设置为 0，因为您不想垂直滚动，并将 x 设置为 -1 *(左值(。