Автоматическая прокрутка элемента к его нижней части при изменении содержимого работает в Интернете, но не в мобильном сафари. (используя реакцию и крючки) - PullRequest
Новая
       6

Автоматическая прокрутка элемента к его нижней части при изменении содержимого работает в Интернете, но не в мобильном сафари. (используя реакцию и крючки)

0 голосов
/ 23 января 2020

Я пытался решить это некоторое время, и я не могу понять это. Если кто-то может указать мне правильное направление, я буду очень признателен.

Мой интерфейс очень похож на чат, с областью внизу, где вы вводите сообщение, которое добавляется в конец прокручиваемая область. Естественно, когда сообщение добавляется, я хочу автоматически прокручивать область прокрутки до ее нижней части. (Обратите внимание, что прокручиваемая область - это элемент, а не окно). Это работает в Интернете, но не в сафари на мобильных устройствах. Вот код, который я использую, который работает в Интернете: 

const scrollableArea = useRef(null);
const [messages, setMessages] = useState([]);

...

useEffect(() => {
    if (scrollableArea.current)
      scrollableArea.current.scrollTop = scrollableArea.current.scrollHeight;
  }, [messages]);

...

// in the render function I put the ref in the element that is scrollable:
<Content ref={scrollableArea}>
...

Я подумал, что, возможно, прокрутка с помощью описанной выше техники не поддерживается в Safari, поэтому я провел эксперимент, подключив к этому элементу список событий прокрутки, а затем на прокрутке, используя эту технику, чтобы прокрутить вниз. Ожидается, что при попытке прокрутки элемент будет продолжать прокручивать вас до самого конца. К моему удивлению, это работает таким образом, поэтому я не знаю, что делать. Если у кого-то есть идеи по поводу того, как заставить это работать, или по-другому, чтобы заставить элемент автоматически прокручиваться в его нижней части в сафари, я был бы очень признателен.

Код для эксперимента: 

useEffect(() => {
    if (scrollableArea.current) {
      const handleScroll = () => {
        scrollableArea.current.scrollTop = scrollableArea.current.scrollHeight;
      };
      let thisArea = scrollableArea.current;
      scrollableArea.current.addEventListener("scroll", handleScroll);
      return () => thisArea.removeEventListener("scroll", handleScroll);
    }
  });
...