Использование события window.onscroll для обнаружения прокрутки страницы / фрейма - PullRequest
Новая
       10

Использование события window.onscroll для обнаружения прокрутки страницы / фрейма

2 голосов
/ 01 апреля 2010

Я хочу разместить DIV внутри страницы так, чтобы он был виден пользователю, даже если пользователь прокручивает страницу по вертикали.

Заголовок страницы вверху страницы имеет высоту 75 px. Теперь, когда пользователь находится вверху страницы и не прокручивает по вертикали, DIV должен быть расположен ниже заголовка. Однако, как только пользователь прокручивает страницу, из-за чего заголовок исчезает, та же самая строка DIV должна теперь находиться в верхней части страницы (т. Е. Около верхнего края окна просмотра браузера)

Моя большая проблема - поддержка события window.onscroll в браузерах. Я проверил QuirksMode на совместимость (http://www.quirksmode.org/dom/events/scroll.html). Кажется, что он имеет достойную совместимость с IE и Firefox. Однако поддержка Safari и Chrome кажется немного странной. И оба этих браузера являются частью списка моих целевых браузеров.

Кто-нибудь может мне сказать, является ли событие window.onscroll эффективным способом обнаружения прокрутки страниц / фреймов? Любые другие предложения?

P.S. Я рассмотрел использование правила CSS position: fixed. Это близко к решению, но DIV просто застрял в одной позиции, и я не могу заставить его адаптивно двигаться в зависимости от видимости заголовка.

Спасибо!

Ответы [ 3 ]

1 голос
/ 22 августа 2011

Вот еще один альтернативный метод, который вы можете попробовать. Я использую его, чтобы расположить панель инструментов div в верхней части страницы (тоже работает для ipad).

Вместо использования события onScroll, я использую таймер для запуска каждые 500 мс, чтобы определить, куда прокручивается окно с помощью scrollTop. Вы можете настроить таймер на 200 мс, если хотите.

Вот урезанный пример моего кода:

Этот код jquery проверяет, когда и если мой элемент div с именем dom с именем "floatlayer" (это div, содержащий панель инструментов моих кнопок) готов, а затем вызывает функцию setRepeater

$(#floatlayer").ready(function () {
    return setRepeater();
});

Затем эта функция создает таймер для продолжения выполнения функции "keepIncrease" каждые 500 мс 

 function setRepeater() {
        aTimer = window.setInterval("keepIncrease()", 500);
        return false;
    }

Это функция keepIncrease (), которая повторяется каждые 500 мс и отвечает за позиционирование div панели инструментов на основе текущей позиции прокрутки окна: 

function keepIncrease() {
    var divToolbar = $("#floatlayer")[0];

    var currentPos =  $(window).scrollTop();
    divToolbar.style.top = currentPos + "px";

    return false;
}

Что-то еще не по теме: Если ваш контент находится внутри iframe, вы также можете использовать $ (window.parent) .scrollTop () вместо $ (window) .scrollTop ()

0 голосов
/ 01 апреля 2010

Если вы читаете о неловкости в WebKit на Quirksmode, вы заметите следующее:

Safari (но не на iPhone) и Chrome, кажется, контролируют доступ к scrollTop, чтобы определить, прокрутил ли пользователь элемент. Функция журнала моего тестового сценария регулярно меняет scrollTop, и Safari отвечает, вызывая событие прокрутки. Поскольку регистрация этого события еще раз меняет scrollTop элемента журнала, события прокрутки будут запускаться непрерывно. Все это происходит, когда элемент журнала внизу страницы еще не имеет полосы прокрутки, когда он имеет нормальное переполнение: видимое, и даже когда я устанавливаю scrollTop в 0 каждый раз, когда регистрируется новое событие. Поведение с ошибками прекращается только тогда, когда я полностью удаляю строку scrollTop.

Эта проблема не должна влиять на то, что вы пытаетесь достичь, поскольку вы не устанавливаете scrollTop для любого элемента. Вы присоединяете onscroll к окну, которое, по-видимому, не вызывает проблем между браузерами.

0 голосов
/ 01 апреля 2010

Почему бы просто не использовать "фиксированный"?

О, я вижу, я пропустил часть о заголовке.

Вы все еще можете использовать опцию position: fixed, хотя. Вы бы просто установили позицию против «body» изначально (учитывая разрыв 75px), и как только заголовок покидает видимость, вы можете выровнять div относительно верхней части области просмотра. Но без использования onscroll тем или иным способом вы, вероятно, не сможете делать то, что хотите. Иногда вам просто нужно принять решение: я хочу больше или больше людей?

...