Vextor-ltd
@Vextor-ltd
Webdeveloper

Почему не работает el.scrollIntoView() до указанного элемента?

Есть список постов, который генерится вот так:

async function getPosts() {
  let res = await fetch('./api/posts');
  let posts = await res.json();

  const postList = document.querySelector('.post-list');
  postList.innerHTML = '';

  posts.forEach((post) => {
    postList.innerHTML += `

      <div class="card col-lg-4 col-sm-6 bg-light">
        <div class="card-body ">
          <h5 class="card-title">${post.title}</h5>
          <p class="card-text">${post.body}</p>
          <a href="#" class="card-link">Подробнее...</a>
          <a href="#" class="card-link" onclick="removePost(${post.id})">Удалить</a>
          <a href="#" class="card-link" onclick="selectPost('${post.id}', '${post.title}', '${post.body}')">Редактировать</a>
        </div>
      </div>

    `
  });
}

getPosts();

Вот функция selectPost():

function selectPost(id, title, body) {
  window.idToUpdate = id;
  document.getElementById('title-edit').value = title;
  document.getElementById('body-edit').value = body;
  document.getElementById('update-form').scrollIntoView({behavior: "smooth"});
  console.log(document.getElementById('update-form'));        // <div id="update-form" class="row col-lg-4 col-sm-16 my-3">
}

Форма имеет идентификатор update-form:

<div class="row col-lg-4 col-sm-16 my-3" id="update-form">
        <h2>Редактирование поста</h2>
...

При клике на ссылку "Редактировать" происходит скроллинг к началу документа, а не к форме с id `update-form`, хотя при вызове функции selectPost() элемент формы выводится в консоли. Почему такое происходит?
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы