Tengo un iframe de tamaño establecido dentro de un documento HTML de mayor tamaño, lo que hace que tenga una barra de desplazamiento. Hay otro conjunto de iframe como el primero y quería sincronizar el desplazamiento en ambos documentos. Puedo obtener tanto #document , que tiene la barra de desplazamiento. Entonces puedo configurar el evento de desplazamiento. El problema es que me gustaría usar .animate , pero cuando lo hago, aparece el siguiente error.

 > jquery-3.6.0.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'display') > at ae (jquery-3.6.0.min.js:2:44259) > at Object.S.Animation.S.extend.prefilters (jquery-3.6.0.min.js:2:73843) > at lt (jquery-3.6.0.min.js:2:73011) > at HTMLDocument.a (jquery-3.6.0.min.js:2:76247) > at Function.dequeue (jquery-3.6.0.min.js:2:42775) > at HTMLDocument.<anonymous> (jquery-3.6.0.min.js:2:43330) > at Function.each (jquery-3.6.0.min.js:2:3639) > at S.fn.init.each (jquery-3.6.0.min.js:2:1778) > at S.fn.init.queue (jquery-3.6.0.min.js:2:43217) > at S.fn.init.animate (jquery-3.6.0.min.js:2:76386)

En primer lugar, no entiendo qué falta y si .animate no funciona, ¿por qué funcionan .scrollTop() y .scrollLeft() ?

Uso el siguiente código para .animate y .scrollTop()/.scrollLeft()

 htmlContentSrc.scroll(function (event) { if (previewLangPairMngr.onScrollBlocker && previewDisplayMngr.containerSync) { previewLangPairMngr.onScrollBlocker = false; htmlContentTrg.animate({ scrollTop: htmlContentSrc.scrollTop(), scrollLeft: htmlContentSrc.scrollLeft() }, 100, function () { previewLangPairMngr.onScrollBlocker = true; }); } }); htmlContentSrc.scroll(function (event) { if (previewLangPairMngr.onScrollBlocker && previewDisplayMngr.containerSync) { previewLangPairMngr.onScrollBlocker = false; htmlContentTrg.scrollTop(htmlContentSrc.scrollTop()); htmlContentTrg.scrollLeft(htmlContentSrc.scrollLeft()); previewLangPairMngr.onScrollBlocker = true; } });