He estado tratando de sincronizar dos divs diferentes con diferentes tamaños. Como puede ver en este jsfiddle , casi estoy allí. Pero mientras mueve el pergamino horizontal más grande, el interior no termina en el extremo final del pergamino. Quiero que ambos estén sincronizados, comiencen y terminen en sus propios tamaños. He intentado jugar con su ancho pero no puedo hacer que funcione. Creo que falta un desplazamiento.
$(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); }); });En segundo lugar, sería bueno que el desplazamiento horizontal interno también desplace el externo de forma sincronizada.
Lo he hecho funcionar jsfiddle .
En lugar de usar los anchos div, uso el ancho de la barra de desplazamiento.
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);Gracias de cualquier manera.