Синхронизация вертикальной и горизонтальной прокрутки в JavaScript/jQuery ⇐ Jquery

[Гость]

У меня есть два элемента, .box и .wrap, и я хочу синхронизировать их позиции прокрутки, чтобы при вертикальной прокрутке в .box .wrap прокручивался горизонтально в соответствии с ними. Однако текущий код, который я использую, похоже, работает неправильно. .wrap достигает своей конечной позиции намного раньше, чем ожидалось, примерно после 20% прокрутки .box.

Снимок экрана пользовательского интерфейса: верхние значки должны прокручиваться горизонтально при прокрутке подкатегорий

JSFiddleDemo

Любые идеи по улучшению кода будут оценены по достоинству. Спасибо.

Код:

var master = ".box"; вар раб = ".wrap"; вар master_tmp; вар раб_tmp; вар таймер; вар синхронизации = функция () { if ($(this).hasClass(slave.replace('.', ''))) { master_tmp = мастер; раб_tmp = раб; мастер = раб; подчиненный = master_tmp; } $(ведомый).unbind("прокрутка"); var процент = this.scrollTop/(this.scrollHeight - this.offsetHeight); var q = процент * $(slave).get(0).scrollWidth; $(ведомый).scrollLeft(q); if (typeof (таймер) !== 'не определено') ClearTimeout (таймер); таймер = setTimeout(function () { $(slave).scroll(sync) }, 200); } $(мастер).прокрутка(синхронизация); HTML-структура