отслеживать скрол

@tgarl · Регистрация: 15.02.2012

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
var pag_e = 1;
var block_e = false;
$(window).scroll(function () {
    if($(window).height() + $(window).scrollTop() >= $(document).height() - 600 && !block_e) {
        block_e = true;
        pag_e = pag_e + 1;
                alert(pag_e);

вот никак не могу понять как заблокировать скрипт - если прокручивать потихоньку, то все работает, а если колесиком мышки, то получаю сразу pag_e=2, pag_e=3. иногда 2 одинаковых значения и у меня выскакивает либо 2 одинаковых сообщения либо 2 сразу

Добавлено через 21 час 29 минут
никто не может подсказать?

@Lazy_Den · 13.02.2014, 17:36

Сообщение от tgarl

никто не может подсказать?

Подсказать, что шаг колеса мышки отличается от того, когда юзер тянет за скроллбар? Или подсказать, что такой шаг у разных устройств, может значительно отличаться? Или предположить, что высота каждого блока настолько мала, что и одного движения колеса хватает, чтоб проскочить сразу несколько блоков? Еще вчера прошел мимо, потому как не охота быть К.О. Можно было бы что-то подумать, что-то предположить, найти правильный бубен, с которым плясать, но для этого, как минимум, хорошо бы выложить пример в песочницу. Для вас, как далеко не новичка на форуме, я думал, что это должно быть очевидно.

@tgarl · 13.02.2014, 18:57 **[ТС]**

если вы понимаете мою ошибку, то на мой взгляд того, что я выложил достаточно. Дальше было всего-лишь отобразить div с id=asd+pag_e Но если вам нужен весь код не вопрос, правда я уже его переделал под постраничку(проблема осталась) вот он http://jsfiddle.net/Dgtgt/

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(document).ready(function () {
    var pag_e_f = $("#nav_resulsi").val();
    var pag_e = 1;
    var block_e = false;
    var stranno = $("#podgruzka_e").html();
    var ids_e = null;
$(window).scroll(function () {
    if($(window).height() + $(window).scrollTop() >= $(document).height() - 500 && !block_e) {
        block_e = true;
        if(ids_e == null){
            scrollPosition=$(window).scrollTop();
            ids_e = setTimeout(function(){
                pag_e = pag_e + 1;
                if ( pag_e <= pag_e_f){
                    $("#prelod").css('display','block');
                        //alert(pag_e+" - "+pag_e_f); сюда приходят 2значения вместо 1
                        $("#podgruzka_e").load('/ind.php #test li', {PAGEN_1: pag_e}); 
                        setTimeout(function(){
                            stranno = $("#podgruzka_e").html();
                            $('#test').append(stranno);
                            $("#prelod").css('display','none');
                            if (scrollPosition !== undefined && scrollPosition !== null) {
                                $(window).scrollTop(scrollPosition);
                            }
                        },2000);
                        $("#podgruzka_e").html();
                        if(ids_e !== null){ids_e = null;}
                        block_e = false;
                }
            },500);
        }
    }
});
 
});

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul id="test">
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
    <li>блок</li>
</ul>
<div id="prelod" style="display:none; text-align:center;width:99%;"><img src="/images/486.GIF"></div>
<input type="hidden" value="5" id="nav_resulsi">
<div id="podgruzka_e" style="display:none;"></div>

Комментарий модератора

Код должен присутствовать в тексте сообщения. Песочницы — это лишь бонус для демонстрации.

@Lazy_Den · 13.02.2014, 21:34

Мде... Видать это страшная тайна, раз вы не хотите ввести в курс дела. Глядя на ваш код, я могу только догадываться, что у вас там происходит и какой результат должен быть в итоге. Сделал вам абстрактный пример и поясню, что там происходит. Пригодиться - плиззз, а нет - то пардоньте.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var flag = false,
    block = 1,
    cnt = $('#grid li').length,
    output = $('#output'),
    mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
 
output.load('/gh/gist/response.html/8977252 #b1');
$(document).on(mousewheelevt+'.my_wheel', function(e){
    e.preventDefault();
    console.log(flag);
    if(flag) return false;
    var evt = window.event || e;     
    evt = evt.originalEvent ? evt.originalEvent : evt;
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta; 
    if(delta > 0) {
        if(block <= 1) return false;
        output.load('/gh/gist/response.html/8977252 #b' + (--block));
    }
    else{
        if(block >= cnt) return false;
        output.load('/gh/gist/response.html/8977252 #b' + (++block));
    }
    flag = true;
    $('html,body').finish().animate({
        scrollTop : $('li').eq(block).offset().top
    }, 1000, function(){
        flag = false;
    });
});
// если надо отменить запрет скроллинга мышью
//$(document).off('.my_wheel');

Задачу придумал следующую: необходимо, чтоб при прокрутке мыши, попадать четко на очередной блок, при этом должен подгружаться соответствующий блок внешнего документа (его можно лицезреть тут).
Решение: запрещаем юзверю прокрутку мышкой, отлавливаем направление, куда он планировал скроллить и с помощью метода .animate() подводим к следующему (вверх/вниз) от текущего блоку. Может чего лишнего забыл убрать из кода, но это уже не суть важно.

Добавлено через 5 минут
P.S. К чему это я?.. Иногда лучше сделать работу за пользователя, чем ждать, что он может повести себя, как обезьяна с гранатой.

@tgarl · 14.02.2014, 10:51 **[ТС]**

Мде... Видать это страшная тайна, раз вы не хотите ввести в курс дела. Глядя на ваш код, я могу только догадываться, что у вас там происходит и какой результат должен быть в итоге.

никакой тайны нет. я привел код который использую. содержимое блоков <li> генерируется на основе request параметров. id=test не меняется, на странице ничего не меняется, только когда прокручиваем до грубо говоря 3/4 документа

JavaScript
1
$(document).height() - 500

мы отправляемся на эту же страницу, но с параметрами

JavaScript
1
$("#podgruzka_e").load('/ind.php #test li', {PAGEN_1: pag_e});

и забираем содержимое сгенерированного id=test и подставляем в текущий в конец - по сути это постраничная навигация через скрол. но проблема в том что когда я скролю(и тут не важно через мышку или ползунок...) скрол срабатывает 2 раза и я получаю либо две вторых, либо две третьих страницы

JavaScript
1
2
if($(window).height() + $(window).scrollTop() >= $(document).height() - 500 && !block_e) {
        block_e = true;

этот блок в моем понятии должен сработать 1 раз, а второй нет потому как block_e уже существует, но на практике получается что нет.
как еще объяснить то, что мне нужно

За приведенный код большое спасибо, есть чему поучиться, но вот ирония ваша мне увы не понятна

@Lazy_Den · 14.02.2014, 11:13

Сообщение от tgarl

ирония ваша мне увы не понятна

Не понятна потому, что это вовсе не ирония, а скорее плохо скрытое раздражение. Но оставим это, а по поводу вашей задачи, то скролл будет срабатывать постоянно, а вот остановите вы выполнение действий, связанных с этим событием или разрешите выполнение - зависит от вас. То есть, доскроллили до 2/3 страницы > выполнили действие > поставили флаг > скроллим дальше > проверяем по флагу, делали мы что-то или еще нет > если да - return false, если нет - выполняем и ставим флаг.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .