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

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);

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

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

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

Подписаться 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

+1 ещё

Простой
Как с помощью js создать прямоугольное соединение двух и более элементов в SVG?
- 1 подписчик
- 3 часа назад
- 52 просмотра
0

ответов
JavaScript

Простой
Как можно соединить 2 массива в 1 без 2 forEach?
- 1 подписчик
- 10 часов назад
- 80 просмотров
1

ответ
JavaScript

Простой
Как фильтровать массив в массиве методом filter?
- 1 подписчик
- 14 часов назад
- 74 просмотра
3

ответа
JavaScript

Простой
Как посчитать количество пересечений с помощью метода filter?
- 1 подписчик
- вчера
- 156 просмотров
3

ответа
JavaScript

Простой
Как реализовать логику назад вперед?
- 1 подписчик
- вчера
- 107 просмотров
0

ответов
JavaScript

+2 ещё

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

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- 24 нояб.
- 57 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 217 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 117 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 738 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Консультация по созданию математических графиков в Cinema 4D

27 нояб. 2024, в 01:38

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

Дизайн трекера для учета задач и времени

27 нояб. 2024, в 01:05

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

Исправление в битрикс подключенной библиотеки и обновление метода

27 нояб. 2024, в 00:22

1500 руб./в час

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;
};

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

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

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

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