如何使用 JavaScript 以一個作為參考來同步兩個不同大小的框的滾動

Question

我有兩個盒子，一個比另一個小。 小框包含與另一個相同的文本，但由於它更小，因此自動滾動需要更長的時間。 我希望大盒子在小盒子結束的同時結束滾動。

 let stepSize = 0.5; let masterSpeed = 50; let masterElement = document.getElementById("master-box"); let slaveElement = document.getElementById("slave-box"); var scroll = 0; window.setInterval(function(){ if(masterElement.scrollTop > scroll) scroll = masterElement.scrollTop; masterElement.scrollTo({ top: scroll, behavior: 'smooth' }) scroll += 1; }, masterSpeed); //THIS WILL RUN IN EVERY 50 MILISECONDS // Match slave speed to master speed let masterDistance = masterElement.scrollHeight - masterElement.clientHeight; let masterScrollTime = masterDistance / masterSpeed; let syncedSpeed = masterDistance / masterScrollTime; window.setInterval(function(){ if(slaveElement.scrollTop > scroll) scroll = slaveElement.scrollTop; slaveElement.scrollTo({ top: scroll, behavior: 'smooth' }) scroll += 1; }, syncedSpeed); //THIS WILL RUN IN EVERY 50 MILISECONDS

 .container { display: flex; } span { display: block; height: 3px; background: red; }.box1{ width: 100px; height: 200px; overflow-y: auto; border: 2px solid blue; margin: 10px; }.box2{ width: 200px; height: 300px; overflow-y: auto; border: 2px solid blue; margin: 10px; }

 <div class="container"> <div class="box1" id="master-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus, Natus tenetur iusto temporibus.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Qui. aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus, Natus tenetur iusto temporibus,<span></span></div> <div class="box2" id="slave-box">Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui. aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus, Natus tenetur iusto temporibus.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div> </div>

Answer 1

使用百分比而不是滾動索引。 制作幾個輔助函數，它會更容易理解。 看哪：

 let masterElement = document.getElementById("master-box"); let slaveElement = document.getElementById("slave-box"); // Scroll to a percentage of the vertical height function scrollToPct(element, pct){ var scroll = (element.scrollHeight - element.clientHeight) / 100 * pct; element.scrollTo({ top: scroll, behavior: 'smooth' }); } // Get the percentage of vertical scroll function getScrollPct(element){ return element.scrollTop / (element.scrollHeight - element.clientHeight) * 100; } // Listen to the mastre element and update the slave element accordingly masterElement.addEventListener('scroll', function(){ var scroll_pct = getScrollPct(this); scrollToPct(slaveElement, scroll_pct); }); // turn on the autoscroll setInterval(function(){ var scroll_pct = getScrollPct(masterElement); scrollToPct(masterElement, scroll_pct + 5); }, 10);

 .container { display: flex; } span { display: block; height: 3px; background: red; }.box1{ width: 100px; height: 200px; overflow-y: auto; border: 2px solid blue; margin: 10px; }.box2{ width: 200px; height: 300px; overflow-y: auto; border: 2px solid blue; margin: 10px; }

 <div class="container"> <div class="box1" id="master-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus, Natus tenetur iusto temporibus.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Qui. aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus, Natus tenetur iusto temporibus,<span></span></div> <div class="box2" id="slave-box">Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui. aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus, Natus tenetur iusto temporibus.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div> </div>

Answer 2

不要使用setInterval兩次。 相反，使用滾動百分比更新第二個，而不是僅使用相同的 scrollTop。

此外，將行為設置為平滑會導致動畫運行，這可能會干擾您的滾動命令。

最后，您需要考慮 scrollHeight 和 clientHeight。

 const masterSpeed = 50; const stepSize = 10; const masterElement = document.getElementById("master-box"); const slaveElement = document.getElementById("slave-box"); const masterScrollHeight = masterElement.scrollHeight; const slaveScrollHeight = slaveElement.scrollHeight; const masterClientHeight = masterElement.clientHeight; const slaveClientHeight = slaveElement.clientHeight; const masterHeight = masterScrollHeight - masterClientHeight; const slaveHeight = slaveScrollHeight - slaveClientHeight; /* console.log({ masterScrollHeight, slaveScrollHeight, masterClientHeight, slaveClientHeight, masterHeight, slaveHeight }); */ let interval = window.setInterval(function() { const currentMasterScrollTop = masterElement.scrollTop; const newMasterScrollTop = currentMasterScrollTop + stepSize; if (newMasterScrollTop > masterHeight) { window.clearInterval(interval); interval = null; } const percentageMasterDone = newMasterScrollTop / masterHeight; const newSlaveScrollTop = Math.ceil(percentageMasterDone * slaveHeight); /* console.log({ currentMasterScrollTop, newMasterScrollTop, percentageMasterDone, newMasterScrollTop, newSlaveScrollTop }); */ masterElement.scrollTo({ top: newMasterScrollTop }); slaveElement.scrollTo({ top: newSlaveScrollTop }) }, masterSpeed); //THIS WILL RUN IN EVERY 50 MILISECONDS

 .container { display: flex; } span { display: block; height: 3px; background: red; }.box1 { width: 100px; height: 200px; overflow-y: auto; border: 2px solid blue; margin: 10px; }.box2 { width: 200px; height: 300px; overflow-y: auto; border: 2px solid blue; margin: 10px; }

 <div class="container"> <div class="box1" id="master-box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus, Natus tenetur iusto temporibus.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Qui. aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus, Natus tenetur iusto temporibus,<span></span></div> <div class="box2" id="slave-box">Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui. aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus, Natus tenetur iusto temporibus.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus,Lorem ipsum dolor sit amet consectetur. adipisicing elit, Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id. odit minus. Natus tenetur iusto temporibus!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, aspernatur sequi harum sunt adipisci aperiam autem perspiciatis quidem delectus corporis nulla modi sit id, odit minus. Natus tenetur iusto temporibus!<span></span></div> </div>