Arhn - архитектура программирования

Кроссбраузерность: определение положения прокрутки только JS

Я долго искал ответ на этот вопрос и, НАКОНЕЦ, нашел его. Я пишу это, чтобы сэкономить будущим программистам много времени и нервов.

Пожалуйста, прокомментируйте ниже, если вы хотели бы увидеть что-то добавленное или у вас есть какие-либо вопросы, и я добавлю это. Это станет более полным ответом, поскольку люди будут поднимать вопросы.

javascript scroll html vertical-scrolling horizontal-scrolling
17.04.2015

  • если вы действительно думаете, что это может помочь кому угодно, и по этой причине вы это написали, то вам следует вставить решение как ответ, а не под вопросом 17.04.2015
  • Ваше сердце в правильном месте :) - это только ваше решение, которое не... 17.04.2015
  • Кроме того, вам нужно будет отметить его принятым, чтобы получить эффект (ответ)... 17.04.2015
  • Я переместил решение в раздел ответов. Спасибо. Я не могу принять свой собственный ответ в течение двух дней, так что... до тех пор. 17.04.2015
  • пожалуйста, проголосуйте за меня, если я исправил проблему, за которую вы меня проголосовали. 26.09.2015

Ответы:


1

Это решение для поиска/определения положения полосы прокрутки в трех основных браузерах (IE, Chrome, Firefox). Сообщите мне, если вы найдете версию этих браузеров, которая не будет работать, и я отредактирую этот ответ, чтобы включить эту информацию.

Older versions of chrome:
var scrollTop = document.body.scrollTop; //Chrome
var scrollLeft = document.body.scrollLeft; //Chrome

Chrome > v.78.0.3904.97 (That I know of)
var scrollTop = window.scrollY; //Chrome
var scrollLeft = window.scrollX; //Chrome

Other Browsers:
var otherScrollTop = document.documentElement.scrollTop; //IE & Firefox
var otherScrollLeft = document.documentElement.scrollLeft; //IE & Firefox

Эти переменные будут определять положение прокрутки для всей страницы.

Как отметил @Eloy Pineda: вы можете написать это более кратко:

var scrollTop = window.scrollY || document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = window.scrollX || document.body.scrollLeft || document.documentElement.scrollLeft;
17.04.2015
  • Я проголосовал за это, а затем в итоге использовал jquery, как в этот ответ. Если кто-то еще столкнется с этой проблемой, это может быть вариант 26.10.2015
  • Jquery определенно делает это проще. В то время я был в положении, когда мне нужно было решение только для JavaScript. Спасибо за голосование! 27.10.2015
  • @Goahnary, отличный ответ. Я согласен, что это лучшее решение на сегодняшний день. Всего 2 маленькие вещи, которые нужно добавить: (1) Я думаю, вы можете сделать это еще более кратким всего в одной строке: var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;. (2) Я думаю, что это будет работать на IE9+, возможно, это не очень важно, но я думаю, стоит упомянуть :) 29.11.2015
  • Я не думаю, что это больше работает. В Chrome document.body.scrollTop всегда возвращает 0 для меня. 09.11.2019
  • @ flyingL123 Я вижу, что он работает, когда я ссылаюсь на него в консоли. Он все еще должен работать. 12.11.2019
  • @NoahGary действительно? Какая версия Хрома? Я использую Version 78.0.3904.97 (Official Build) (64-bit) на Mac, и он возвращает 0 независимо от того, где я прокручиваюсь. 17.11.2019
  • @NoahGary да, похоже, это новое ожидаемое поведение: bugs.chromium. org/p/chromium/issues/detail?id=766938 17.11.2019
  • @ flyingL123 Я обновил свой ответ. Спасибо что подметил это. 18.11.2019
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..