同步两个不同大小的卷轴

Question

我一直在尝试同步两个不同大小的 div。正如您在此 jsfiddle 中所见，我快完成了。但是，在移动较大的水平滚动条时，内部滚动条不会在其最终滚动条结束时完成。我希望两者同步，以自己的大小开始和结束。我试过玩弄它们的宽度，但无法让它发挥作用。我认为缺少偏移量。

 $(function() {
   // move along with container
   $('#container').on('scroll', e => {
     $('#container2').css(
       'transform',
       `translate(${e.target.scrollLeft}px, ${e.target.scrollTop}px)`,
     );

     const containerElement = $('#container'),
       bigPanelElement = $('#big-panel'),
       container2Element = $('#container2'),
       bigPanelWidth = bigPanelElement.width(),
       bigPanelHeight = bigPanelElement.height(),
       containerScrollLeft = containerElement.scrollLeft(),
       container2ScrollLeft = container2Element.scrollLeft(),
       containerScrollTop = containerElement.scrollTop(),
       container2Width = container2Element.width(),
       container2Height = container2Element.height();

     const newScrollLeft =
       bigPanelWidth === 0 ?
       0 :
       (container2Width * containerScrollLeft) /
        bigPanelWidth,
       newScrollTop =
       bigPanelHeight === 0 ?
       0 :
       (container2Height * containerScrollTop) /
       bigPanelHeight;

     //console.log(`newScrollLeft ${newScrollLeft}`);

     container2Element.scrollLeft(newScrollLeft).scrollTop(newScrollTop);

   });
 });

其次，如果内部水平滚动条也能同步滚动外部水平滚动条就好了。

Answer 1

我成功了 jsfiddle。

我没有使用 div 宽度，而是使用滚动条宽度。

const maxScrollLeft = containerElement[0].scrollWidth - containerElement[0].clientWidth;
const maxScrollTop = containerElement[0].scrollHeight - containerElement[0].clientHeight;

const maxScrollLeft2 = container2Element[0].scrollWidth - container2Element[0].clientWidth;
const maxScrollTop2 = container2Element[0].scrollHeight - container2Element[0].clientHeight;

const percLeft = containerScrollLeft / maxScrollLeft;
const percTop = containerScrollTop / maxScrollTop;

const newScrollLeft = Math.ceil(percLeft * maxScrollLeft2);
const newScrollTop = Math.ceil(percTop * maxScrollTop2);

谢谢。

同步两个不同大小的卷轴

Sync two scrolls with different sizes

javascript

jquery

scroll