Отслеживание прокручиваемых пикселей - PullRequest
Новая
       2

Отслеживание прокручиваемых пикселей

1 голос
/ 21 ноября 2011

Привет! Я ищу способ определить, сколько пикселей пользователь прокрутил вниз по веб-странице (в режиме реального времени), прежде чем инициировать события.

Я сталкивался с этим кодом, который мне нужен, но мне нужно собрать всю страницу, а не просто div. Я не могу увеличить div до размера всей страницы, потому что для этого потребуется прокрутить iPad / iPhone и т. Д. 

<head>
    <script type="text/javascript">
        function OnScrollDiv (div) {
            var info = document.getElementById ("info");
            info.innerHTML = "Horizontal: " + div.scrollLeft
                            + "px<br/>Vertical: " + div.scrollTop + "px";
        }
    </script>
</head>
<body>
    <div style="width:100px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
        Please scroll this field!
        <div style="height:300px; width:100px; background-color:#ccc;"></div>
        Please scroll this field!
        <div style="height:300px; width:100px; background-color:#ccc;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    Current scroll amounts:
    <div id="info"></div>
</body>

Пример того, что я делаю, можно найти по адресу http://www.nikebetterworld.com/. Любая помощь будет высоко оценена.

Редактировать: это внизу страницы!

1 Ответ

1 голос
/ 21 ноября 2011

В jQuery вам нужно искать событие scroll() плюс метод scrollTop(). Вы можете использовать их, чтобы узнать, как далеко вниз прокручивается страница пользователя, и на основе значения отображать или скрывать содержимое по мере необходимости. 

$(window).scroll(function() {
   var currentPosition = $(this).scrollTop();
   // do something with currentPosition...
});

Вы также можете применить этот метод к отдельным элементам, к которым применен overflow: scroll, а также к объекту window, как в этом случае.

Вот скрипка, чтобы увидеть это в действии

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...