Почему не скроллит к элементу?

Question

evomed @evomed

Почему не скроллит к элементу?

Задача - скроллить к вложенному комментарию из уведомления. Как на Тостере.
Код

const element = document.getElementById(elementId);
console.log(element);
const elementRect = element.getBoundingClientRect();
const absoluteElementTop = elementRect.top + window.pageYOffset;
const middle = absoluteElementTop - (window.innerHeight / 2.3);
window.scrollTo(0, middle);

в логе элемент успешно отрисовывается. Но скролить к нему не хочет.

Вопрос задан более трёх лет назад
351 просмотр

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

10 комментариев

evomed @evomed Автор вопроса

Я не писал, что код неправильный.

Написано более трёх лет назад
MSAFT @MSAFT

Так в чем тогда проблема? Код отрабатывает? Если нужно его исполнить при загрузке, нужно добавить что-то вроде такого:
<body onload="myFunction()">

Написано более трёх лет назад
evomed @evomed Автор вопроса

MSAFT, он исполняется. в логе элемент успешно отрисовывается. Но скролить к нему не хочет.

Написано более трёх лет назад
MSAFT @MSAFT

evomed, покажите html, возможно в нем проблема

Написано более трёх лет назад
evomed @evomed Автор вопроса

MSAFT, верстку не могу выложить. В панели нахожу в коде нужный комментарий с правильныым ид вида
<div id="comment_51651"></div>
при неправильной верстке засыпало бы ошибками. Да и js писал бы что вместо элемента null. В vue dev tools также id элемента совпадает с каментом ну и впринципе все логи верные. Просто не скроллит

Написано более трёх лет назад
MSAFT @MSAFT

evomed, так может не работает, потому что вы vue используете? В теге вопроса у вас указан javascript и о том, что вы используете Vue, я догадался, только потому что вы написали про vue dev tools

Имейте ввиду, vuejs не всегда идентичен native js

https://codepen.io/habrauser-the-flexboxer/pen/dyYoJLK

Написано более трёх лет назад
evomed @evomed Автор вопроса

MSAFT, добавил тег vue. Думал это чисто js вопрос. Как можно в моем случае ваш пример использовать? Т.е. я делаю :ref="'comment_'+reply.id" на элемент, в функцию передаю elementId и нужно теперь подставить в this.$refs.elementId.scrollIntoView(true);

Написано более трёх лет назад
MSAFT @MSAFT

https://codepen.io/habrauser-the-flexboxer/pen/vYNOdxM

Написано более трёх лет назад
evomed @evomed Автор вопроса
MSAFT,
Не получается. Делаю так. Компонент Comments, который через v-for крутит компонент Comment
В компонте Comment крутится компонент Comment (ответы на коммегт)

<div v-for="reply in comment.replies" :key="reply.id" :ref="'comment_'+reply.id"> <Comment> </Comment> </div>

здесь же в mounted компонента вызываю

var elementId = window.location.hash.replace('#', '') if(elementId) { console.log(elementId); this.$refs[elementId].scrollIntoView(true); }

в ссылке передаю прапвильный ид #comment_5616516
Пишет
Error in mounted hook: "TypeError: this.$refs[elementId].scrollIntoView is not a function"
Че ему надо?
Написано более трёх лет назад
MSAFT @MSAFT

evomed, У вас вопрос был почему не скроллит к элементу. К элементу скроллит, причем как на js так и на vuejs. Данный вопрос я считаю закрытым.

А почему не скроллит к компонентам в цикле на vue это уже совершенно другой вопрос. Задайте отдельный вопрос и предоставьте больше данных по компоненту comment и я попробую вам помочь.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

10 комментариев

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
IMask. Как после сабмита очистить поле type="tel" и показать очищенную маску +7 (___) ___-__-__?
- 1 подписчик
- час назад
- 23 просмотра
0

ответов
Vue.js

Простой
Из-за чего может добавлять слеш в url?
- 1 подписчик
- 7 часов назад
- 35 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
Vue.js

Средний
Какие существуют способы отреагировать на удаление элемента из массива, который передается как пропс в другие компоненты?
- 1 подписчик
- вчера
- 36 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- вчера
- 73 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- вчера
- 83 просмотра
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- вчера
- 577 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Запуск установки приложения PWA при загрузке страницы?
- 2 подписчика
- вчера
- 214 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как получить актуальные данные в state при использовании server side event (в момент срабатывания события) в компоненте React?
- 1 подписчик
- 20 апр.
- 73 просмотра
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Доработка парсера

23 апр. 2024, в 19:21

300 руб./за проект

Верстка сайта

23 апр. 2024, в 19:05

15000 руб./за проект

Создать учебный сайт на React

23 апр. 2024, в 19:01

7000 руб./за проект

Answer 1 · 2020-04-13 09:06:23

MSAFT @MSAFT

https://codepen.io/habrauser-the-flexboxer/pen/ExVjoyy

Ответ написан более трёх лет назад

10 комментариев

Answer 2 · 2020-04-13 09:04:58

Первый момент, может дом не погружается полностью, т.е. надо убедиться и только потом вызвать код. Второй, попробуйте так:

function setScrollTop(a1){
	document.documentElement.scrollTop=a1;
	document.body.parentNode.scrollTop=a1;
	document.body.scrollTop=a1;
};

Почему не скроллит к элементу?

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

IMask. Как после сабмита очистить поле type="tel" и показать очищенную маску +7 (_) _--?

Из-за чего может добавлять слеш в url?

Почему при добавление переменно в style, она перестаёт обновляться?

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

Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?

Существуют ли браузерные реализации WebView для AJAX и Fetch?

Как обрабатывать пользовательский запрос больше не показывать конкретный попап?

Как сделать появление баннера от определенной высоты?

Запуск установки приложения PWA при загрузке страницы?

Как получить актуальные данные в state при использовании server side event (в момент срабатывания события) в компоненте React?

Минуточку внимания

Почему не скроллит к элементу?

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

Минуточку внимания

Войдите на сайт