Как реализовать прокручиваемую область (скролл) внутри управляемой формы 1С?

← На главную

При разработке интерфейсов на управляемых формах 1С часто возникает задача создания фиксированной области, внутри которой элементы могли бы прокручиваться. Типичный пример — лента сообщений, список задач или динамически формируемый набор кнопок. Стандартная ОбычнаяГруппа в 1С не имеет собственного свойства прокрутки; скролл появляется только у всей формы целиком, что не всегда удобно, если нам нужно оставить «шапку» и «подвал» формы неподвижными.

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

Метод 1. Использование Поля HTML-документа (самый гибкий вариант)

Рассмотрим наиболее современный подход, который позволяет добиться визуального сходства с интерфейсами популярных мессенджеров или социальных сетей. Использование ПолеHTMLДокумента дает полный контроль над оформлением и прокруткой.

Пошаговый алгоритм реализации:

Добавим на форму реквизит с типом Строка и разместим его как элемент Поле HTML-документа.
Сформируем HTML-код, в котором основной контейнер имеет фиксированную высоту и свойство CSS overflow-y: auto;.
Настроим взаимодействие между HTML и 1С для обработки нажатий.

Проанализируем пример формирования содержимого:


&НаСервере
Процедура СформироватьЛентуНаСервере()
    ТекстHTML = "<html><body style='margin:0; padding:10px; font-family:Arial;'>";
    ТекстHTML = ТекстHTML + "<div style='height: 300px; overflow-y: scroll; border: 1px solid #ccc;'>";
    
    Для Каждого Сообщение Из Объект.СписокСообщений Цикл
        ТекстHTML = ТекстHTML + "<div style='margin-bottom:10px; padding:5px; background:#f0f0f0;'>";
        ТекстHTML = ТекстHTML + "<p>" + Сообщение.Текст + "</p>";
        ТекстHTML = ТекстHTML + "<a href='v8action:click?id=" + Сообщение.Идентификатор + "'>Подробнее</a>";
        ТекстHTML = ТекстHTML + "</div>";
    КонецЦикла;
    
    ТекстHTML = ТекстHTML + "</div></body></html>";
    ЭтаФорма.ПолеЛенты = ТекстHTML;
КонецПроцедуры

Для обработки кликов внутри такой области мы используем событие ПриНажатии элемента ПолеHTMLДокумента. Выясним причину использования схемы v8action: она позволяет передавать параметры из HTML-кода обратно в процедуру 1С, что делает область не просто текстовой, а интерактивной.

Метод 2. Таблица значений с группировкой колонок («нативный» способ)

Если мы не хотим погружаться в верстку на HTML, можно использовать стандартный элемент Таблица. Этот метод позволяет эмулировать прокручиваемую область, используя строки таблицы как «блоки» данных.

Как это настроить:

Создадим таблицу на форме (связанную с данными типа ТаблицаЗначений).
Добавим в таблицу колонки, которые будут содержать данные (текст, картинки, флажки).
Важный момент: Сгруппируем эти колонки в одну «Группу колонок» и установим для нее режим отображения В отдельной строке.
В свойствах самой таблицы отключим: ОтображениеЗаголовка, ОтображениеПодвала, ГоризонтальныеЛинии и ВертикальныеЛинии.

Разберем ситуацию: теперь каждая строка таблицы выглядит не как набор ячеек, а как отдельная карточка. Поскольку у таблицы 1С встроенная вертикальная прокрутка работает всегда при превышении количества строк, мы получаем желаемый эффект фиксированной области со скроллом.

Метод 3. Использование Табличного документа

Еще один интересный вариант — разместить на форме ПолеТабличногоДокумента. Рассмотрим подробнее, почему это эффективно. Табличный документ по своей природе — это бесконечное полотно с собственными полосами прокрутки.

Мы можем программно выводить в него области, содержащие не только текст, но и Рисунки, которые могут выполнять роль кнопок. Выясним, как сделать область интерактивной: для ячеек или рисунков можно установить свойство Гиперссылка и обрабатывать событие Выбор.

Пример программного заполнения области:


&НаСервере
Процедура ЗаполнитьПрокручиваемуюОбласть()
    ТабДок = ЭтаФорма.Элементы.ПолеТабличногоДокумента;
    ТабДок.Очистить();
    
    Макет = ПолучитьМакет("МакетЭлементаЛенты");
    Для Инд = 1 По 20 Цикл
        Область = Макет.ПолучитьОбласть("Строка");
        Область.Параметры.Значение = "Элемент списка №" + Инд;
        ТабДок.Вывести(Область);
    КонецЦикла;
КонецПроцедуры

Этот метод хорош тем, что позволяет визуально проектировать «карточку» элемента в конфигураторе через макет, не прибегая к сложному коду CSS.

Метод 4. Хитрость с фиксацией высоты формы

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

Алгоритм реализации «псевдо-скролла» группы:

Установим у формы свойство СпособОтображенияОкна в значение Максимизированное или зададим жесткую высоту окна.
Разместим сверху (шапка) и снизу (подвал) группы с фиксированным размером (свойство РастягиватьПоВертикали = Ложь).
Центральную группу, где будут наши элементы, оставим с включенным свойством РастягиватьПоВертикали = Истина.
Если количество элементов в центральной группе превысит высоту экрана, платформа автоматически добавит прокрутку всей форме.

Результат: За счет того, что шапка и подвал прижаты к краям, а центральная часть переполнена, пользователю будет казаться, что прокручивается только центральная область, в то время как меню и заголовки остаются на месте.

Сравнение методов и рекомендации

Посмотрим на итоговую таблицу применимости решений:

Поле HTML-документа: Идеально для сложных интерфейсов, чатов и красивой визуализации. Требует знаний HTML/CSS.
Таблица значений: Лучший выбор для списков однотипных данных с кнопками управления. Минимум кода, высокая производительность.
Табличный документ: Подходит для формирования отчетов с элементами интерактивности или карточек со сложной разметкой ячеек.
Фиксация высоты формы: Используется, когда нужно прокручивать стандартные поля ввода 1С, не создавая сложной программной логики.

Выясним, какой метод выбрать именно вам: если ваша задача — просто «накидать элементов», попробуйте сначала Метод 4 или Метод 2. Если же вы стремитесь к современному дизайну «как в ВК», то альтернативы Полю HTML-документа практически нет. Мы надеемся, что эти способы помогут вам сделать интерфейсы ваших конфигураций более удобными и функциональными!