這是解決您所問(wèn)問(wèn)題的一種方法。
設(shè)置
white-space: nowrap;在頁(yè)面加載時(shí)，由于在 CSS 中，它會(huì)將段落設(shè)置為一行。
兩個(gè)變量將分配給 DOM 中的元素；button和content。
向右滑動(dòng)
之后，當(dāng)單擊按鈕（它可以是任何觸發(fā)器）時(shí)，所有內(nèi)容所在的容器將scrollLeft內(nèi)容scrollWidth（5000px在本例中為 around）除以 3。在 JavaScript 中：
document.getElementById('container').scrollLeft += (content.scrollWidth / 3);滿足您的需求，但這是一個(gè)基本示例。您可以在 MDN上閱讀有關(guān)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>
