Постраничная пагинация + бесконечный скроллинг страниц

@drcrash · Регистрация: 04.07.2015

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

Привет всем!
Хочу сделать как тут - http://scrollsample.appspot.com/items
Для сайта, урлы страниц которого имеют такой вид: - /index.php?page=1(2,3,4,5 и тд по мере наполнения сайта)
В пхп соображаю на уровне редактирования готового, да и то не всегда выходит), а функция очень удобная. Хотелось бы ее себе на сайт

F57 · 04.07.2015, 11:31

ЧПУ + infinity scroll

@drcrash · 04.07.2015, 11:36 **[ТС]**

infinity scroll не подходит. посмотрите пример, а именно урл в адресной строке при скроллинге. нужен именно переход по страницам во время скролла

F57 · 04.07.2015, 11:40

@drcrash · 04.07.2015, 11:51 **[ТС]**

Нужно, чтобы это было именно физическое перемещение, как в примере, а не просто замена урла в браузере. Я много примеров пересмотрел, в общем описание, как должно быть тут - http://www.seonews.ru/events/r... rokrutkoj/

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

@Июнь · 04.07.2015, 12:17

В вашем примере имитируется "физическое перемещение". Если идет прямое обращение к странице 2, отображайте элементы только для этой страницы, пока не начнется скроллинг.

F57 · 04.07.2015, 13:09

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

там нужно указывать количество страниц, а это величина не постоянная.

У вас количество страниц растёт с каждой секундой или что?..

@drcrash · 04.07.2015, 14:51 **[ТС]**

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

У вас количество страниц растёт с каждой секундой или что?..

по-разному. может и раз в час, может и 2 раза в секунду - не контролируемый процесс)

Добавлено через 6 минут

Сообщение от Июнь

В вашем примере имитируется "физическое перемещение". Если идет прямое обращение к странице 2, отображайте элементы только для этой страницы, пока не начнется скроллинг.

в общем есть физические страницы, нужно перемещение между ними и по ним при помощи бесконечного скроллинга. При этом (может в примере не так) должен не имитироваться переход, а именно быть переход. А визуально шапку и футер оставить неподвижными, а контент подгружается - как-то так бы...

Добавлено через 6 минут
и по поводу имитации - я скачал пример как мог локально при помощи телепорта - там статичные хтмлки и они при помощи скроллинга выходит и подгружаются. но локально скрипт не заработал(

Добавлено через 52 секунды
Да и в описании по скролингу так и пишется, что у каждой подгружаемой страницы есть урл

Добавлено через 3 минуты
В общем можно ли полностью копию вытащить с этого примера? - http://scrollsample.appspot.com/items

Добавлено через 18 минут
вот что-то нашел - http://stackoverflow.com/quest... mple-works

вроде как в скрипте http://scrollsample.appspot.com/static/main.js
функция initPaginator вызывает функцию history.replaceState, которая позволяет изменять адрес в адресной строке без изменения страницы...

@Июнь · 04.07.2015, 15:11

Зачем нужен фактический переход, если результат один и тот же (для полной идентичности можете удалять пункты, относящиеся к предыдущим страницам)? Плавность скроллинга нарушится.

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

@drcrash · 04.07.2015, 15:17 **[ТС]**

Нашел, вот демо - http://demo.lanmediaservice.co... log/page/7
Вот архив - https://github.com/kuchumovn/w... all/master - буду пробовать

@Июнь · 04.07.2015, 15:19

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

функция initPaginator вызывает функцию history.replaceState, которая позволяет изменять адрес в адресной строке без изменения страницы...

Вам про это еще в сообщении #4 написали, а вы стали говорить: "а не просто замена урла в браузере".

@drcrash · 04.07.2015, 15:22 **[ТС]**

Только вот пример в виде одного файла, в котором весь контент поделен на 3 части, он и добавляется...

HTML5
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<html>
    <head>
        <title>Бесконечная прокрутка</title>
        
        <meta name="author" content="kuchumovn">
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        
        <script src="scroll_watcher.js"></script>
        
        <script src="../web2.scroll.js"></script>
        <link rel="stylesheet" type="text/css" href="../web2.scroll.css"/>
        
        <style type="text/less">
            body
            {
                background-image: url('texture.jpg');
                text-align: center;
                
                > *
                {
                    text-align: left;
                }
            }
            
            @font-face 
            {
                font-family: Amsterdam;
                src: url('amsterdam.ttf');
            }
            
            ul
            {
                display: inline-block;
            
                margin-left: 120px;
                margin-right: 120px;
                margin-top: 80px;
            
                list-style-type: none;
                
                line-height: 110px;
                
                li
                {
                    white-space: nowrap;
                }
            }
            
            ul, .previous_container, .scroll_detector
            {
                font-family: Amsterdam;
                font-size: 70px;
            }
            
            .scroll_detector
            {
                color: #7f7f7f;
                text-align: center;
                margin-bottom: 100px;
            }
            
            body
            {
                margin-top: 100px;
            
                .pushkin
                {
                    text-align: center;
                    
                    > img
                    {
                        display: block;
                        margin-left: auto;
                        margin-right: auto;
                    }
                }
            }
            
            .previous_container
            {
                text-align: center;
                margin-top: 60px;
            }
            
            .previous
            {
                display: none;
                text-decoration: none;
                color: #8e5e00;
            }
            
            .loading_previous
            {
                color: #7f7f7f;
                display: none;
            }
        </style>
        
        <script src="http://lesscss.org/js/less.js"></script>
 
        <script>
            var Евгений_Онегин = 
            [
                [
                    'Не мысля гордый свет забавить, ',
                    'Вниманье дружбы возлюбя, ',
                    'Хотел бы я тебе представить ',
                    'Залог достойнее тебя, ',
                    'Достойнее души прекрасной, ',
                    'Святой исполненной мечты, ',
                    'Поэзии живой и ясной, ',
                    'Высоких дум и простоты; ',
                    'Но так и быть - рукой пристрастной ',
                    'Прими собранье пестрых глав, ',
                    'Полусмешных, полупечальных, ',
                    'Простонародных, идеальных, ',
                    'Небрежный плод моих забав, ',
                    'Бессониц, легких вдохновений, ',
                    'Незрелых и увядших лет, ',
                    'Ума холодных наблюдений ',
                    'И сердца горестных замет. '
                ],
 
                [
                    '"Мой дядя самых честных правил, ',
                    'Когда не в шутку занемог, ',
                    'Он уважать себя заставил ',
                    'И лучше выдумать не мог. ',
                    'Его пример другим наука; ',
                    'Но, боже мой, какая скука ',
                    'С больным сидеть и день и ночь, ',
                    'Не отходя ни шагу прочь! ',
                    'Какое низкое коварство ',
                    'Полу-живого забавлять, ',
                    'Ему подушки поправлять, ',
                    'Печально подносить лекарство, ',
                    'Вздыхать и думать про себя: ',
                    'Когда же чорт возьмет тебя!" '
                ],
                
                [
                    'Так думал молодой повеса, ',
                    'Летя в пыли на почтовых, ',
                    'Всевышней волею Зевеса ',
                    'Наследник всех своих родных. ',
                    'Друзья Людмилы и Руслана! ',
                    'С героем моего романа ',
                    'Без предисловий, сей же час ',
                    'Позвольте познакомить вас: ',
                    'Онегин, добрый мой приятель, ',
                    'Родился на брегах Невы, ',
                    'Где, может быть, родились вы ',
                    'Или блистали, мой читатель; ',
                    'Там некогда гулял и я: ',
                    'Но вреден север для меня.'
                ]
            ]
            
            var сколько_строк_на_странице = 14
            
            function параметр(name, url)
            {
                if (!url)
                    url = decodeURI(window.location.href)
        
                name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]")
                var regexS = "[\\?&]"+name+"=([^&#]*)"
                var regex = new RegExp( regexS )
                var results = regex.exec(url)
        
                if (results == null)
                    return null
        
                return decodeURIComponent(results[1])
            }
            
            var страница = 1
            if (параметр('страница'))
            {
                страница = параметр('страница')
            }
            
            function адрес()
            {
                var адрес = window.location.href
                
                var index = адрес.indexOf('?')
                if (index < 0)
                    return адрес
                    
                return адрес.substring(0, index)
            }
        </script>
        
        <script>
            $(function()
            {
                /*
                 * container — the "<ul></ul>" list (for example)
                 *
                 * data — a function returning the content of page No "page".
                 * A callback is used to allow Ajax data loading.
                 *
                 * total — total count of the data items (e.g. total "<li></li>"s in the "<ul></ul>")
                 *
                 * page — current page
                 *
                 * page_size — number of data items on page (e.g. number of "<li></li>"s on one page)
                 *
                 * url — the url of the web page depending on the current data page
                 *
                 *     default — first page
                 *     page — other page ("#{page}" will be replaced with current page number)
                 *
                 * render (data, container) — the function called to render a data item inside the container ("<li></li>")
                 *
                 * scroll — enables "endless scrolling"
                 *
                 *     detector — an element, which triggers loading of the next page, when it appears on the bottom of the screen.
                 *     it may say "Loading...", etc.
                 *
                 *     watcher — a tool object with functions "watch(element)" and "unwatch(element)".
                 *     it generates events "appears_on_bottom" and "disappears_on_bottom" on the element, 
                 *     when it appears/disappears (respectively) on the bottom of the screen.
                 *
                 *     You may impelement your own scroll watcher. Here I use mine.
                 *     It is based on MooTools, so it requires including mootools.core.js on your page.
                 *     Also, as every piece of code, my scroll watcher can have its own bugs.
                 *     So I give you a choise: either you write your own scroll watcher, or you use mine.
                 *
                 * beginning — is called when we hit the first page while navigating backwards (to the previous data pages)
                 *
                 * end — is called when we hit the last page while navigating forwards (to the next data pages)
                 *
                 * before_page — is called before showing (next or previous) page
                 * 
                 * after_page — is called after showing (next or previous) page
                 * 
                 * on_previous — is called when the previous page is requested
                 * 
                 * on_shown_previous — is called after the previous page is shown
                 */
                var web2scroll = new Web2Scroll
                ({
                    container: $('ul'),
                    data: function(page, callback) 
                    {
                        var data = {}
                        
                        var счётчик = страница
        
                        var строки = Евгений_Онегин[страница - 1]
                        var есть_ли_ещё = typeof Евгений_Онегин[страница] !== 'undefined'
                        
                        // simulate Ajax behaviour
                        setTimeout(function()
                        {
                            callback({ data: строки, has_more: есть_ли_ещё })
                        },
                        1000)
                    },
                    total: Евгений_Онегин.length * сколько_строк_на_странице,
                    page: страница,
                    page_size: сколько_строк_на_странице,
                    url: 
                    {
                        default: адрес(),
                        page: адрес() + '?страница=#{page}'
                    },
                    render: function(data, container)
                    {
                        container.text(data)
                    },
                    scroll:
                    {
                        detector: $('.scroll_detector'),
                        watcher: new Scroll_watcher()
                    },
                    beginning: function() 
                    { 
                        $(window).scrollTop($(window).scrollTop() - $('.previous_container').outerHeight(true))
                        $('.previous_container').remove() 
                    },
                    end: function() { },
                    before_page: function(type, container)
                    {
                        if (type === 'previous')
                            $('<li/>').html('&nbsp;').prependTo((container))
                    },
                    after_page: function(type, container)
                    {
                        if (type === 'next')
                            $('<li/>').html('&nbsp;').appendTo(container)
                    },
                    on_previous: function()
                    {
                        $('.previous').hide()
                        $('.loading_previous').show()
                    },
                    on_shown_previous: function()
                    {
                        $('.loading_previous').hide()
                        $('.previous').show()
                    }
                })
                
                $('.previous').on('click', function(event)
                {
                    event.preventDefault()
                    
                    web2scroll.previous_page()
                })
                
                // это хак,
                // чтобы обозреватель сам не прокручивал вниз при обновлении страницы.
                // работает через раз, хз как решить
                $(function()
                {
                    $(window).scrollTop(0)
                })
                
                // если мы не на первой странице — показать ссылку "Ранее"
                if (страница > 1)
                {
                    $('.previous').css('display', 'inline-block')
                }
            })
        </script>
    </head>
    
    <body>
        <div class="web2scroll vertical_progress_bar">
            <div class="bar">
                <div class="progress">
                    <div class="you_are_here"></div>
                </div>
            </div>
        </div>
 
        <div class="pushkin">
            <a href="http://en.wikipedia.org/wiki/Alexander_Pushkin"><img title="Alexander Sergeevich Pushkin" src="pushkin.png"/></a>
        </div>
        
        <div class="previous_container">
            <a href="#" class="previous">Раньше</a>
            <span class="loading_previous">Ждите...</span>
        </div>
        
        <ul></ul>
        
        <div class="scroll_detector">Ждите...</div>
    </body>
</html>

@Июнь · 04.07.2015, 15:26

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

Нашел, вот демо - http://demo.lanmediaservice.co... log/page/7

В рекомендациях, ссылку на которые вы давали, советуют не использовать #.

@drcrash · 04.07.2015, 15:30 **[ТС]**

Сообщение от Июнь

Вам про это еще в сообщении #4 написали, а вы стали говорить: "а не просто замена урла в браузере".

а как сделать, чтоб как тут - http://demo.lanmediaservice.co... og/page/30 на основе https://github.com/kuchumovn/w... all/master сайту, где нет пагинации, но есть урлы страниц вида /index.php?page=1(2,3,4,5 и тд по мере наполнения сайта) ?

Добавлено через 1 минуту

Сообщение от Июнь

В рекомендациях, ссылку на которые вы давали, советуют не использовать #.

проглядел. надо по рекомендациям. в общем СЕО френдли... - урл в текущем месте скроллинга чтоб совпадал с реальным этой страницы

@Июнь · 04.07.2015, 15:30

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

Только вот пример в виде одного файла, в котором весь контент поделен на 3 части, он и добавляется...

Вы что не понимаете разницы между тремя строфами и постоянно добавляемыми пунктами?

@drcrash · 04.07.2015, 15:42 **[ТС]**

Сообщение от Июнь

Вы что не понимаете разницы между тремя строфами и постоянно добавляемыми пунктами?

ну одна страница и несколько - нет?

Добавлено через 8 минут

Сообщение от Июнь

Зачем нужен фактический переход

Это для повышения поведенческого фактора на сайте - типа кликнули на следующую страницу. но не критично

@Июнь · 04.07.2015, 15:47

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

ну одна страница и несколько - нет?

Нет, в последнем случае дополнительное содержимое должно загружаться после загрузки основного содержимого, а для этого нужно предпринять определенные действия на стороне сервера.

Добавлено через 3 минуты

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

но не критично

не некритично, а совершенно непрактично.

В общем думайте, а я пошла

@drcrash · 04.07.2015, 15:52 **[ТС]**

Сообщение от Июнь

В общем думайте, а я пошла

хорошо подумаю, напишу чего надумал... но когда голова ушла думать сложно)

Добавлено через 3 минуты
Да что думать - нужен просто сурс первого примера и по возможности помощь в применении)

Новые блоги и статьи Все статьи Все блоги /
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

@drcrash 0 / 0 / 0 Регистрация: 04.07.2015 Сообщений: 9

	Постраничная пагинация + бесконечный скроллинг страниц 04.07.2015, 11:29. Показов 5219. Ответов 17 Метки нет (Все метки) Привет всем! Хочу сделать как тут - http://scrollsample.appspot.com/items Для сайта, урлы страниц которого имеют такой вид: - /index.php?page=1(2,3,4,5 и тд по мере наполнения сайта) В пхп соображаю на уровне редактирования готового, да и то не всегда выходит), а функция очень удобная. Хотелось бы ее себе на сайт 0

F57 68 / 68 / 23 Регистрация: 17.02.2015 Сообщений: 397
	04.07.2015, 11:31
	ЧПУ + infinity scroll 0

@drcrash 0 / 0 / 0 Регистрация: 04.07.2015 Сообщений: 9
	04.07.2015, 11:36 [ТС]
	infinity scroll не подходит. посмотрите пример, а именно урл в адресной строке при скроллинге. нужен именно переход по страницам во время скролла 0

F57 68 / 68 / 23 Регистрация: 17.02.2015 Сообщений: 397
	04.07.2015, 11:40
	1

@drcrash 0 / 0 / 0 Регистрация: 04.07.2015 Сообщений: 9
	04.07.2015, 11:51 [ТС]
	Нужно, чтобы это было именно физическое перемещение, как в примере, а не просто замена урла в браузере. Я много примеров пересмотрел, в общем описание, как должно быть тут - http://www.seonews.ru/events/r... rokrutkoj/ простую пагинацию получается добавить (на пхп) да и контент и так постранично разбит. единственное, что у простой пагинации проблема - там нужно указывать количество страниц, а это величина не постоянная. Нашел там же доработку - она не работает( 0

@Июнь Заблокирован
	04.07.2015, 12:17
	В вашем примере имитируется "физическое перемещение". Если идет прямое обращение к странице 2, отображайте элементы только для этой страницы, пока не начнется скроллинг. 1

@Июнь Заблокирован
	04.07.2015, 15:11
	Зачем нужен фактический переход, если результат один и тот же (для полной идентичности можете удалять пункты, относящиеся к предыдущим страницам)? Плавность скроллинга нарушится. Чтобы скрипт заработал, можно скачать клиентскую часть, но серверную часть придется переписывать. 0

@drcrash 0 / 0 / 0 Регистрация: 04.07.2015 Сообщений: 9
	04.07.2015, 15:17 [ТС]
	Нашел, вот демо - http://demo.lanmediaservice.co... log/page/7 Вот архив - https://github.com/kuchumovn/w... all/master - буду пробовать 0