在Javascript中查找水平滚动条拇指的宽度

Question

我正在创建一个书籍项目，如果单击音频按钮，该书将被阅读。在阅读这本书时，我会突出显示相应的词。现在当有一个长文本时，水平滚动条会随着overflow-x: scroll;属性的设置而出现。现在，如果屏幕的可见部分被读取，我需要将滚动条/幻灯片的拇指移动到内容的下一部分。问题来了。假设 div 宽度为650px，滚动宽度为1500px。如果650px读取了 的内容，我需要显示 next 的内容650px。如果我滚动太多scrollLeft: 650px，下一个内容的一部分将会丢失。650px所以，我也必须找到拇指的宽度。所以我需要的部分scrollLeft是650 - thumb's width。我如何找到拇指的宽度？还是有其他方法可以做到这一点？

Answer 1

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

设置

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

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

向右滑动

之后，当单击按钮（它可以是任何触发器）时，所有内容所在的容器将scrollLeft内容scrollWidth（5000px在本例中为 around）除以 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>