Как я могу использовать scrollIntoView () с подключенным хуком - PullRequest
Новая
       23

Как я могу использовать scrollIntoView () с подключенным хуком

0 голосов
/ 23 октября 2019

У меня есть компонент Vue, а в шаблоне есть несколько элементов div, несколько изображений и объект User, переданный из Laravel 6.0. Кажется, все работает нормально, пока я не попытаюсь использовать scrollIntoView () с функцией mount (). Из того, что я могу сказать, страница пытается scrollIntoView (), прежде чем она будет полностью загружена. Если я ограничу пользовательский объект небольшим размером (всего 2 пользователя), все будет отлично. Но если данных больше, они не прокручиваются для просмотра, как следует. Это работает, если я использую функцию установленного тайм-аута, но выглядит хаккейно и не профессионально.

Я просто хочу прокрутить до div (заголовок) после того, как представление смонтировано / загружено. Div - это первый div на странице, в котором нет изображений (если это даже имеет значение). Может кто-нибудь помочь мне решить это? Я видел, что смонтированная функция относится только к виртуальному DOM? Если так, что мы можем использовать в Vue, который больше похож на JQuery $ (document) .ready (), но для конкретного компонента и применяется к фактическому DOM? 

  mounted() {       
    var elmnt = document.getElementById("move-to-header");
    elmnt.scrollIntoView(true);
    }
  }

1 Ответ

0 голосов
/ 24 октября 2019

Я получил его с помощью функции обратного вызова моего запроса axios. Однако мне нужно было обернуть его в функцию setTimeout без указания количества миллисекунд, но в целом он работает без ошибок. 

  get_user(the_name) {
      axios
        .post("/get_users", { the_name: the_name})
        .then(response => {
           this.display_user(response.data);
           setTimeout(() => {
             var elmnt = document.getElementById("move-to-header");
             elmnt.scrollIntoView();
   })
...