在Javascript中找到水平滚动条的拇指宽度 设置向右滑动

如何解决在Javascript中找到水平滚动条的拇指宽度 设置向右滑动

我正在创建一个图书项目，如果单击音频按钮，将读取该图书。在阅读本书时，我正在突出显示相应的单词。现在，当文本较长时，将显示水平滚动条，并设置了overflow-x: scroll;属性。

现在，如果读取了屏幕的可见部分，则需要将滚动条/滑块的拇指移动到内容的下一部分。问题来了。假设div宽度为650px，滚动宽度为1500px。如果读取了650px的内容，则需要显示下一个650px的内容。如果我scrollLeft: 650px滚动了太多内容，则会丢失下一个650px内容的一部分。因此，我也必须找到拇指的宽度。因此，我需要scrollLeft的部分将是650 - thumb's width。我如何找到拇指的宽度？还是有其他替代方法可以做到这一点？

解决方法

这是解决您所要询问的一种方法。

设置

由于CSS中的white-space: nowrap;，在页面加载时，它将段落设置为一行。

两个变量将分配给DOM中的元素； button和content。

向右滑动

此后，当单击按钮（可以是任何触发器）时，所有内容所在的容器将scrollLeft的内容scrollWidth（在这种情况下约为5000px ）除以3。在JavaScript中：

document.getElementById('container').scrollLeft += (content.scrollWidth / 3);

随心所欲，但这是一个基本示例。您可以在MDN上详细了解scrollLeft和scrollWidth。

const button = document.getElementById('moveButton');
const content = document.getElementById('text');

button.onclick = function() {
  document.getElementById('container').scrollLeft += (content.scrollWidth / 3);
};

#container {
  width: 600px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#text {
  white-space: nowrap;
}

<div id="container">
  <p id="text">Morbi eros ligula,hendrerit in imperdiet ac,porta ut ex. Suspendisse fringilla gravida turpis venenatis pharetra. Suspendisse potenti. Nunc facilisis dapibus tristique. Nunc id facilisis est,nec gravida diam. Duis feugiat quam ac velit consequat,vel pharetra odio convallis. Donec tempor,mi id sollicitudin lacinia,nunc augue cursus lacus,at pretium nisi quam non risus. Cras faucibus enim tellus,quis sollicitudin elit commodo nec. Nam ornare auctor lectus quis porttitor. Vivamus facilisis
    nisl id libero gravida,eget ornare erat mattis. Ut auctor commodo sollicitudin. Mauris lectus purus,commodo sit amet nunc non,lobortis feugiat metus. Fusce non aliquet velit. Etiam congue purus at quam pharetra porta. Etiam nec magna at elit ullamcorper
    varius ut vitae metus.</p>
</div>

<button id="moveButton" type="button">Move to right</button>