Получить положение элемента DOM относительно верхней части страницы с помощью Javascript (кросс-браузер)

Question

Получить положение элемента DOM относительно верхней части страницы с помощью Javascript (кросс-браузер)

1

У меня возникла проблема с попыткой определить положение элемента DOM относительно верхней части страницы (независимо от того, находится ли она в или из окна просмотра).

Теперь, в Firefox, это очень просто, просто выполните:

jQuery(element).offset().top

Однако в Chrome это выражение возвращает положение элемента относительно окна просмотра, которое изменяется при прокрутке вверх и вниз по странице. В этом случае я могу вместо этого вычислить значение, которое я хочу сделать:

jQuery(element).offset().top + document.body.scrollTop

Трудность, конечно, в том, что разные версии Chrome могут иметь дело с этим по-другому, не говоря уже о других браузерах, которые я даже не могу проверить! Есть ли кросс-браузерное простое решение, чтобы найти это значение? Казалось бы, достаточно просто, чтобы хотеть сделать.

редактировать

Как кто-то сказал, "это должно быть то же самое, что точка jQuery". Я тестировал его на других сайтах, и это так. Почему-то мой сайт отбрасывает его по какой-то причине. Какие-нибудь подсказки о том, что может быть причиной этого?

Hezequiel 04 авг. 2018, в 16:06

Источник

2

Нет, Chrome и Firefox ведут себя одинаково с .offset() . (В этом вся суть jQuery.) Однако Chrome (WebKit в целом) не любит думать о <body> как о части контекста прокрутки.
Pointy 04 авг. 2018, в 13:31
1

Если вы поместите <div> в качестве единственного дочернего элемента для <body> с height: 100% и убедитесь, что вы очистили любые дополнения <body> т. Д., Вы можете использовать этот <div> в качестве ссылочного элемента прокрутки.
Pointy 04 авг. 2018, в 13:34
0

Здравствуйте, Пойнти, вы правы, это не должно быть так, но так или иначе это так. .offset (). top работает, как и ожидалось, на других веб-сайтах ... каким-то образом мой сайт скинул его. Любой ключ к тому, что может быть причиной этого?
Hezequiel 05 авг. 2018, в 01:03
0

Ну, я понятия не имею, как выглядит ваш HTML и CSS, поэтому я не могу сказать.
Pointy 05 авг. 2018, в 01:08
0

На самом деле, вы очень помогли, подтвердив, что «смысл jQuery» в том, что он должен возвращать одно и то же значение в обоих браузерах. Это заставило меня перестать искать кросс-браузерные решения, а попытаться выяснить, что не так с HTML / CSS. Спасибо!
Hezequiel 05 авг. 2018, в 02:32

Показать ещё 3 комментария

Теги:

javascript

position

dom

1 ответ

Ещё вопросы

Нет, Chrome и Firefox ведут себя одинаково с .offset() . (В этом вся суть jQuery.) Однако Chrome (WebKit в целом) не любит думать о <body> как о части контекста прокрутки.
Если вы поместите <div> в качестве единственного дочернего элемента для <body> с height: 100% и убедитесь, что вы очистили любые дополнения <body> т. Д., Вы можете использовать этот <div> в качестве ссылочного элемента прокрутки.
Здравствуйте, Пойнти, вы правы, это не должно быть так, но так или иначе это так. .offset (). top работает, как и ожидалось, на других веб-сайтах ... каким-то образом мой сайт скинул его. Любой ключ к тому, что может быть причиной этого?
Ну, я понятия не имею, как выглядит ваш HTML и CSS, поэтому я не могу сказать.
На самом деле, вы очень помогли, подтвердив, что «смысл jQuery» в том, что он должен возвращать одно и то же значение в обоих браузерах. Это заставило меня перестать искать кросс-браузерные решения, а попытаться выяснить, что не так с HTML / CSS. Спасибо!

Hezequiel · Accepted Answer · 2018-08-05T00-22-00.000Z

Найди его! Как оказалось, для этого было странное правило CSS:

html, body {
    overflow-y: scroll;
}

Это создало окно прокрутки внутри окна прокрутки (но каким-то образом скрытое от представления), что означает, что, хотя я прокручивался через внутреннее окно "тело", мой видовой экран фактически не двигался. Я понял это, заметив, что window.pageYOffset всегда возвращался 0.

Рад, что вы поняли это! Webkit странно относится к прокрутке и <body> способами, которые я не до конца понимаю.