Как предотвратить закрытие модального окна при клике на scrollbar?

Question

[Alexander]

Здравствуйте, подскажите пожалуйста как предотвратить закрытие модального окна при клике на scrollbar?
У меня есть кастомных хук useOnClickOutside, как мне добавить сам scrollbar в условие при клике?
Буду благодарен за ответ

export const useOnClickOutside = (ref: React.RefObject<HTMLElement>, handler: (event: Event) => void) => {
  React.useEffect(() => {
    const listener = (event: Event) => {
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return
      }
      handler(event)
    }
    document.addEventListener('mousedown', listener)
    document.addEventListener('touchstart', listener)
    return () => {
      document.removeEventListener('mousedown', listener)
      document.removeEventListener('touchstart', listener)
    }
  }, [ref, handler])
}

Answer 1

[B1dloKoder]

Насколько я могу понять, Вам нужно добавить еще одно условие event.target != ref.current. Потому что кликая по скроллбару мы кликаем по контейнеру.

Comments

[Alexander]

но клик по контейнеру должен закрывать модальное окно, есть какие-то способы обратится к скроллбару напрямую?

[B1dloKoder]

Alexander, ну... можно сделать wrap-element который и будет скролиться. Это был бы самый простой вариант.
Если такой вариант не подойдет то можно сделать вот так
Однако стоит учитывать, что скроллбары в разных браузерах могут вести себя по-разному, также в моем примере отсутствует учет padding