@lagudal

Как правильнее принудительно установить координаты элементов на экране?

Необходимо сделать несколько "костыльное" решение проблемы.
Страница, на которой имеются 3 таба. Если кликнуть на средний, а затем на любой из крайних, происходит "скачок" наверх страницы. Искать причину замучился, нашел некоторое костыльное промежуточное решение.
Если посмотреть внимательно, то можно увидеть, что только после клика по среднему табу при последующем клике на крайние табы те получают координату на экране getBoundingClientRect().top равной 0.
Увидеть это можно например в консоли -
function message() {
  var top = this.getBoundingClientRect().top;
  alert('top: ' + top + ' ');
  }
  [].forEach.call(document.querySelectorAll('#tab-label-description, #tab-label-additional, #tab-label-productattach'), function(el)  { 
  el.addEventListener('click', message)})


Не придумал ничего пока лучше, чем принудительно установить жестко в пикселях
function message() {
  var top = this.getBoundingClientRect().top;
  if (top == 0) {
   window.scrollTo({ top: 400});
  }
  }
  [].forEach.call(document.querySelectorAll('#tab-label-description, #tab-label-additional, #tab-label-productattach'), function(el)  { 
  el.addEventListener('click', message)})


Но как бы не очень, так как если внизу или вверху страницы будет таб то будет прыгать, не так критично, но все же..
Может как то проще и красивее можно обработать?
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ответы на вопрос 1
@venanen
При клике на средний таб, страница скроллится до #additional. Вероятнее всего, ссылается на него через вертикальную координату на экране, и scrollTo.
В качестве решения, в первый и третий табы свои id, и ссылайся на них.
Ответ написан
Ваш ответ на вопрос

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

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