Я использую компонент пользовательского интерфейса диаграммы Ганта dhtmlx, у которого есть список задач и графическая диаграмма. Список задач и графическая диаграмма содержатся в двух отдельных элементах div, которые синхронизируются для параллельной прокрутки. При прокрутке области диаграммы автоматически прокручивается список задач, в результате чего положение строки задачи совпадает с положением линии Ганта.

Изучив исходный код компонента, я обнаружил, что синхронизация реализуется следующим кодом:

this.oData.onscroll = function() {
    self.panelTime.scrollLeft = this.scrollLeft;
    self.panelNames.scrollTop = this.scrollTop;
};

Вся разметка HTML в элементе управления пользовательского интерфейса динамически создается с помощью JavaScript. Все работает хорошо, за исключением того, что отображение списка задач размером 800 м занимает слишком много времени.

Чтобы сократить время рендеринга, я решил создать свой собственный модуль рендеринга на стороне сервера для генерации разметки HTML, идентичной изначально созданной клиентской стороне. Эта разметка извлекается со стороны клиента с помощью обычного jquery $ .get () и вводится на страницу с помощью $ (el) .html (). Затем я помещаю необходимый обработчик событий в качестве исходной версии на стороне клиента.

Проблема в том, что параллельная прокрутка не работает. Я мог зафиксировать событие прокрутки в области диаграммы, но не смог установить свойство scrollTop области списка задач. Я тестирую в firebug вручную принудительное использование свойства scrollTop, но значение не изменилось. Кажется, что свойство scrollTop доступно только для чтения.

Есть ли этому объяснение?

12
Jimmy Merari 17 Июн 2012 в 06:31

1 ответ

Лучший ответ

Вы не можете прокрутить вниз под нижним (или за правым) содержанием элемента. Если элемент имеет overflow: visible (по умолчанию) или по крайней мере такой же большой, как и его содержимое, то оба свойства прокрутки останутся на 0. Точно так же, даже если есть что-то скрытое для прокрутки в представление, тогда вы выиграли невозможно прокрутить до конца; если вы установите scrollTop или scrollLeft на большее значение, чем имеет смысл, оно уменьшится до самого большого значения, которое имеет смысл.

Я предполагаю, что в вашем случае вы пытаетесь прокрутить div до загрузки его содержимого, и он отказывается прокручивать, потому что нечего прокручивать в представление.

15
Brilliand 17 Июн 2012 в 10:02
Спасибо за объяснение. Я думаю, что я неправильно разместил элемент, поэтому свойство scrollTop переходит не в тот div.
 – 
Jimmy Merari
17 Июн 2012 в 14:56