Кнопки прокрутки («уши»)

Подключение

Javascript-расширение ui.ears позволяет подключить для нужного элемента на странице кнопки прокрутки («уши»).

Доступно с ui 20.5.400.

\Bitrix\Main\UI\Extension::load("ui.ears");

Использование

В js-коде необходимо инициализировать «ушки».

<div class="container"></div>

const ears = new Ears({
	container: document.querySelector('.container'),
	smallSize: true,
	noScrollbar: true
});

ears.init();

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

Дополнительные параметры:

smallSize. Параметр, влияющий на размер «ушей». По умолчанию высота «ушей» 94px. Если передать smallSize, то размер будет 75px.
noScrollbar. По умолчанию скроллбар виден, с помощью этого параметра можно его скрыть.
className. Через него можно задать свой класс.

Дополнительно есть возможность автоматической прокрутки к выбранному элементу, если он скрыт за пределами видимости. Для этого нужному элементу необходимо добавить атрибут data-role="ui-ears-active".

Пример работы:

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Федосеев Вадим 16.07.2023 12:50:39

Сообщение не промодерировано, возможны ошибки и неточности.

Цитата
пишет: true

В итоге надо было добавить BX.UI
Чтобы получилось вот так const ears = new BX.UI.Ears

0 Федосеев Вадим 16.07.2023 09:35:57 Сообщение не промодерировано, возможны ошибки и неточности.
Как обычно ничего не работает <?php require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); use Bitrix\Main\UI\Extension; Extension::load('ui.ears'); ?> <div class="container"> 123 </div> <script> const ears = new Ears({ container: document.querySelector('.container'), smallSize: true, noScrollbar: true }); ears.init(); </script> <?php require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); ?> Ошибка ReferenceError: Can't find variable: Ears

Наверх