使用JS水平滚动HTML表

Question

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

myTable.scrollToColumn(column_ID_or_something_here);

Answer 1

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

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

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

table_Element.scrollBy（x，y）将帮助您滚动表格。 不想垂直滚动时将y设为0，将x设为-1 *（左值）。

Answer 2

您可以使用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);