Событие прокрутки

@body90 · Регистрация: 26.05.2009

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

Здравствуйте! У меня на странице динамически подгружается контент в <div>'ы. Но дело в том, что мне нужно сделать повдение, похожее на vk.com: когда прокрутка доходит до конца - подгружаются новые данные. Как это делается?

@kalabuni · 31.05.2013, 08:40

это делается просто
по событию onscroll отслеживается значение document.body.scrollTop,
которое сравнивается со значением document.body.scrollHeight

когда первое подходит ко второму (т.е. когда скроллбар подъезжает к низу),
запускается функция, коя через объект XMLHTTPRequest "лезет" на сервер и подгружает порцию контента

@body90 · 31.05.2013, 13:52 **[ТС]**

А как сгенерировать начальное состояние страницы (до прокрутки)? <div>'ы буду динамически добавлять в форму, но как узнать сколько их изначально нужно загрузить, чтоб заполнить экран до низу?

@kalabuni · 01.06.2013, 02:47

о какой форме и каких <div>'ах идёт речь?
я про дядьку в Киеве, а вы про огород с бузиной

1. есть страница
формируется она php-скриптом (то есть специальным php-файлом #1)
изначально выдается не вся страница, а только её часть
и в javascripte на странице создаётся специальная переменная - номер порции

2. когда клиент прокрутит контент до низа, в фоновом режиме через объект XMLHTTPRequest происходит вызов другого php-файла, под #2
и этому php-файлу #2 передаётся значение переменной "номер порции"

3. php-файл #2 возвращает на страницу соответствующую порцию контента
javascript на странице эту порцию контента "приживляет" и увеличивает номер порции на единицу

4. когда клиент снова докрутит страницу до низу, повторяется п. 2, но уже php-файлу #2 передаётся другой (следующий) номер порции

а <div>'ы вы там будете добавлять на страницу, или формы - это совершенно не важно

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

@body90 467 / 344 / 19 Регистрация: 26.05.2009 Сообщений: 2,696

	Событие прокрутки 31.05.2013, 04:06. Показов 2191. Ответов 3 Метки нет (Все метки) Здравствуйте! У меня на странице динамически подгружается контент в <div>'ы. Но дело в том, что мне нужно сделать повдение, похожее на vk.com: когда прокрутка доходит до конца - подгружаются новые данные. Как это делается? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	31.05.2013, 08:40
	это делается просто по событию onscroll отслеживается значение document.body.scrollTop, которое сравнивается со значением document.body.scrollHeight когда первое подходит ко второму (т.е. когда скроллбар подъезжает к низу), запускается функция, коя через объект XMLHTTPRequest "лезет" на сервер и подгружает порцию контента 1

@body90 467 / 344 / 19 Регистрация: 26.05.2009 Сообщений: 2,696
	31.05.2013, 13:52 [ТС]
	А как сгенерировать начальное состояние страницы (до прокрутки)? <div>'ы буду динамически добавлять в форму, но как узнать сколько их изначально нужно загрузить, чтоб заполнить экран до низу? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	01.06.2013, 02:47
	о какой форме и каких <div>'ах идёт речь? я про дядьку в Киеве, а вы про огород с бузиной 1. есть страница формируется она php-скриптом (то есть специальным php-файлом #1) изначально выдается не вся страница, а только её часть и в javascripte на странице создаётся специальная переменная - номер порции 2. когда клиент прокрутит контент до низа, в фоновом режиме через объект XMLHTTPRequest происходит вызов другого php-файла, под #2 и этому php-файлу #2 передаётся значение переменной "номер порции" 3. php-файл #2 возвращает на страницу соответствующую порцию контента javascript на странице эту порцию контента "приживляет" и увеличивает номер порции на единицу 4. когда клиент снова докрутит страницу до низу, повторяется п. 2, но уже php-файлу #2 передаётся другой (следующий) номер порции а <div>'ы вы там будете добавлять на страницу, или формы - это совершенно не важно 1