Я пытаюсь определить положение полосы прокрутки браузера с помощью JavaScript, чтобы определить, где на странице текущий вид. Я предполагаю, что мне нужно определить, где находится большой палец на дорожке, а затем высота большого пальца в процентах от общей высоты дорожки. Я слишком усложняю это, или JavaScript предлагает более легкое решение, чем это? Любые идеи по коду?Как получить позицию прокрутки с помощью Javascript?
ответ
Вы можете использовать element.scrollTop
и element.scrollLeft
, чтобы получить вертикальное и горизонтальное смещение, соответственно прокрутившееся. element
может быть document.body
если вас интересует вся страница. Вы можете сравнить его с element.offsetHeight
и element.offsetWidth
(опять же, element
может быть телом), если вам нужны проценты.
document.getScroll= function(){
if(window.pageYOffset!= undefined){
return [pageXOffset, pageYOffset];
}
else{
var sx, sy, d= document, r= d.documentElement, b= d.body;
sx= r.scrollLeft || b.scrollLeft || 0;
sy= r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
}
возвращает массив с двумя integers- [scrollLeft, scrollTop]
Показывает, как использовать эту функцию с примером было бы здорово. – user18490
Я думаю, вы можете использовать этот lastscroll = getScroll(); window.scrollTo (lastscroll [0], lastscroll [1]); –
Отлично работает, но я изменил возврат к объекту с помощью клавиш x и y, так как это имеет для меня немного больше смысла. –
Я сделал это для <div>
на Chrome.
элемент.scrollTop - это пиксели, скрытые в верхней благодаря свитка. При отсутствии свитка его значение равно 0.
элемент.scrollHeight - это пиксели всего дел.
элемент.clientHeight - это пиксели, которые вы видите в вашем браузере.
var a = element.scrollTop;
будет положение.
var b = element.scrollHeight - element.clientHeight;
будет значение максимального для scrollTop.
var c = a/b;
будет процент прокрутки [от 0 до 1].
Если вы используете JQuery есть идеальная функция для вас: .scrollTop()
документ здесь ->http://api.jquery.com/scrollTop/
Примечание: Вы можете использовать эту функцию, чтобы получить или установить позицию.
Смотри также: http://api.jquery.com/?s=scroll
Вопрос OP о JS. Не jQuery. – user18490
JQuery также является библиотекой js и записывается в js –
@RavinderPayal. Но почему ответ на вопрос о JS с библиотекой для JS, когда это вполне возможно и даже удобно делать в raw JS? Вы просто просите его добавить дополнительное время загрузки, а также использовать некоторое хранилище для чего-то совершенно ненужного. Кроме того, с тех пор, когда javascript начал понимать JQuery? – DaemonOfTheWest
Ответ на 2018:
Лучший способ сделать такие вещи, как это использовать Intersection Observer API.
Пересечение наблюдатель API предоставляет возможность наблюдать асинхронно изменения в пересечении целевого элемента с предком элемента или окна просмотра копии документа верхнего уровня является.
Исторически, обнаружение видимости элемента или относительной видимости два элементов по отношению друг к другу, были трудной задачи, для которых решения были ненадежны и склонны к вызывая браузер и сайты пользователя становится доступным, чтобы стать вялым. К сожалению, по мере созревания сети потребность в этом виде информации выросла. Пересечения информация необходима для многих причин, таких как:
- отложенной загрузки изображений или другого содержимого, как страница прокручивается.
- Внедрение веб-сайтов «бесконечной прокрутки», где все больше и больше контента загружается и отображается при прокрутке, так что пользователю не нужно переходить через страницы .
- Отчетность о видимости рекламы для расчета доходов от рекламы.
- Решение о выполнении или выполнении задач или процессов анимации в зависимости от того, увидит ли пользователь результат.
Реализация обнаружения пересечения в прошлом вовлеченного события обработчиков и петля вызова методов, как Element.getBoundingClientRect() для создания необходимой информации для каждого элемент пострадавших. Поскольку весь этот код работает по основному потоку, даже один из них может вызвать проблемы с производительностью. Когда сайт , загруженный этими тестами, все может стать совершенно уродливым.
Смотрите следующий пример кода:
var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options); var target = document.querySelector('#listItem'); observer.observe(target);
browser support Как не велик, вы должны использовать IntersectionObserver polyfill.
- 1. Получить позицию прокрутки с помощью jquery
- 2. Сохранять позицию полосы прокрутки даже после перезагрузки с помощью javascript
- 3. Как получить текущую позицию прокрутки divs?
- 4. Как получить точную позицию прокрутки в списке?
- 5. Как получить позицию прокрутки из Microsoft Word
- 6. Как получить позицию прокрутки страниц (ось Y)
- 7. Как получить последнюю позицию прокрутки, scrollview
- 8. Как получить позицию прокрутки из Microsoft Excel
- 9. Как получить позицию RecyclerView для прокрутки
- 10. Как получить позицию tableviewcell после прокрутки стола.
- 11. Как получить текущую позицию прокрутки в WebView с помощью javascript: MonoTouch?
- 12. Как получить верхнюю позицию iframe в IE6 с помощью JavaScript?
- 13. Как получить позицию курсора текста с помощью JavaScript
- 14. Как изменить позицию div с помощью Javascript?
- 15. Простой способ сохранить позицию прокрутки с помощью ASP.NET MVC2?
- 16. ListView получает позицию прокрутки?
- 17. Получить позицию LinearLayout в макете прокрутки android
- 18. пейджер (меньше) - получить текущую позицию прокрутки?
- 19. Как получить текущую позицию вертикальной прокрутки бара с Avalon TextEdtior
- 20. Как получить позицию поля с помощью pdfbox?
- 21. Как обновить позицию полосы прокрутки с помощью Tkinter
- 22. Получить положение прокрутки в Javascript
- 23. Получить сохраненную позицию прокрутки по щелчку
- 24. Получить позицию прокрутки текстового поля WPF
- 25. Возобновить предыдущую позицию прокрутки
- 26. Получить позицию курсора в mousedown ввода поля с помощью javascript
- 27. Получить позицию элемента по javascript
- 28. Как скрыть полосу прокрутки с помощью JavaScript
- 29. Получить позицию элемента в Javascript
- 30. Изменить позицию опции с помощью JavaScript
Какой браузер вы используете? Получение тела осуществляется по-разному в разных браузерах ('element' и' document.body' были просто примерами). Подробнее см. Http://www.howtocreate.co.uk/tutorials/javascript/browserwindow. –
Я получил его, чтобы дать мне правильное значение для Firefox 3.6 с помощью 'window.pageYOffset', но не могу получить что-либо, работающее над IE7. Пробовал 'window.pageYOffset',' document.body.scrollTop', 'document.documentElement.scrollTop',' element.scrollTop' – Paul
document.body.scrollLeft - то, что мне нужно :) –