@pavelkluev

Скролл div блока нажатием на клавиатуру, как реализовать?

Имеется меню, с управлением на клавиатуре
5fdcf8b5932a6008684608.png
Как реализовать скролл списка? Вообще нету идей, условие, скорллить не мышкой, а переключением по вкладкам
  • Вопрос задан
  • 120 просмотров
Пригласить эксперта
Ответы на вопрос 1
2chevskii
@2chevskii
Если бы каждый мог в поиск, тостер бы вымер.
Это, надо понимать, менюшка для какого нибудь гтарп? Так как рендерится она в webview, что по сути - полноценный браузер, то там доступны все функции браузерного апи.

Пора для моддеров открывать отдельную категорию на тостере...

Ничего не тестировал, клиентскую часть отродясь не писал, но логика и немного гугла подсказывают мне, что как-то так это должно выглядеть.
const state = {
    current: 0,
    top: 0,
    opts: [].fill(new Element()) // fill просто для примера, в реальности тут должны храниться DOM элементы доступных опций
}

const visibleOpts = 6; // кол-во видимых одновременно вариантов меню

const nextIndex = isUpKey => isUpKey ? state.current - 1 : state.current + 1;
const overflows = index => index < 0 || index >= state.opts.length;
const needsScroll = index => {
    if ((index >= top) && (top + visibleOpts - 1 >= index)) {
        return false;
    }

    return true;
}

// вешаем на обработчик нажатий кнопок-переключателей, не знаю, какой у вас фреймворк, надеюсь не богомерзкий fivem... и не богомерзкий ragemp.
// передаем в аргумент сдвинулся ли выбор вверх (true) или вниз (false)
function onArrowKeyPressed(isUpKey) {
    const indexNext = nextIndex(isUpKey);

    if (overflows(indexNext) || !needsScroll(indexNext)) {
        return;
    }

    state.top = isUpKey ? top - 1 : top + 1;
    state.current = indexNext

    state.opts[state.current].scrollIntoView(isUpKey);
}


upd. исправил логику
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы