Как сохранить активный элемент полосы прокрутки всегда видимым? - PullRequest
Новая
       14

Как сохранить активный элемент полосы прокрутки всегда видимым?

0 голосов
/ 26 ноября 2018

Я создаю приложение в React, у которого есть боковая панель, где пользователи могут прокручивать элементы панели, используя стрелки на клавиатуре.При нажатии одной из кнопок кнопка получает активный тег.Когда я карабкаюсь по стрелкам, я перемещаю этот активный класс.Проблема в том, что, если я продолжаю прокручивать, а список достаточно длинный, выбранный элемент может находиться за пределами видимой части боковой панели.Как я могу сохранить активный элемент всегда видимым?Спасибо!
Моя HTML-структура выглядит следующим образом: 

<div style="width: 10%; height: 100vh; overflow: hidden scroll;">
    <ul>
        <li>
            <button order="0" class="btn-block" type="button">test1
            </button>
        </li>
        <li>
            <button order="1" class="btn-block active" type="button">test2
            </button>
        </li>
        ...
    </ul>
</div>

1 Ответ

0 голосов
/ 26 ноября 2018

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

scrollTo = (name) => {
        const node = findDOMNode(this.refs[name]);
        scrollIntoView(node, {
            time: 500,
            block: "end",
            behavior: "smooth",
            align: {
                top: 0
            }
        })
    }
...