Jak przewijać <div> z {overflow:auto} za pomocą klawiszy?

Kokos123

2024-02-07T00:10:34+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 61

Mam diva z overflow:auto i zawiera on kilka przyciskow. Strzalka w dol zaznacza kolejny element a strzalka w gore poprzedni. Zastanawiam sie jak moge zrobic tak zeby aktywny element byl zawsze widoczny czyli zeby div sie scrollowal. Obecnie gdy wyjde poza widoczny zakres diva to aktywny przycisk przesaje byc wudoczny. Mniej wiecej tak moj komponent wyglada:

Kopiuj


export const PopupList = forwardRef(
  <T extends unknown>(
    { items, command, render }: PopupListProps<T>,
    ref: Ref<unknown>
  ) => {
    const [selectedIndex, setSelectedIndex] = useState(0);

    const selectItem = (index: number) => {
      const item = items[index];

      if (item) {
        command(item);
      }
    };

    const upHandler = () => {
      setSelectedIndex((selectedIndex + items.length - 1) % items.length);
    };

    const downHandler = () => {
      setSelectedIndex((selectedIndex + 1) % items.length);
    };

    const enterHandler = () => {
      selectItem(selectedIndex);
    };

    useEffect(() => setSelectedIndex(0), [items]);

    useImperativeHandle(ref, () => ({
      onKeyDown: ({ event }: { event: KeyboardEvent }) => {
        if (event.key === 'ArrowUp') {
          upHandler();
          return true;
        }

        if (event.key === 'ArrowDown') {
          downHandler();
          return true;
        }

        if (event.key === 'Enter') {
          enterHandler();
          return true;
        }

        return false;
      },
    }));

    return (
      <div className='popup-list'>
        {items.length ? (
          items.map((item, index) => (
            <button
              className={`popup-list-item ${index === selectedIndex ? 'is-selected' : ''}`}
              key={index}
              onClick={() => selectItem(index)}
            >
              {render(item)}
            </button>
          ))
        ) : (
          <div className='px-[6px] py-[2px]'>Brak wyników</div>
        )}
      </div>
    );
  }
);

Xarviel

2024-02-07T10:48:02+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 847

Domyślnie, żeby element pozwalał na przewijanie za pomocą strzałek to musi wspierać focus (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) i nie jest potrzebny do tego javascript

Kopiuj

<style>
  div {
    width: 100px;
    height: 100px;
    overflow: auto;
    background: lightblue;
  }

  div::before {
    display: block;
    padding: 500px;
    content: '';
  }
</style>

<div tabindex="0"></div>

Tylko jak to połączyć w Twoim przypadku to nie wiem ¯\_(ツ)_/¯
Pewnie najpierw spróbowałbym z samym tabindex i dopiero później kombinował z dodatkowymi eventami.