這是解決您所問問題的一種方法。
設置
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>
