3r33535. 3r3-31. 3r3403. 3r33511.  3r33535.

A brief history of scrolling

3r33511.  3r33535. To understand what scrolling is, look at the origin of the words . 3r33511.  3r33535. 3r33511.  3r33535. 3r33434. 3r33385. scroll [/b] (n.): c. 140? “roll of parchment or paper” 3r33448. 3r33511.  3r33535. 3r33511.  3r33535. Scrolls were originally used when the document became too long (for example, religious content). With so much content it became difficult to manage, it is difficult to read and rewrite. 3r33511.  3r33535. 3r33511.  3r33535. When computers came into our lives, we still needed a way to navigate large portions of content. 3r33511.  3r33535. 3r33511.  3r33535.
The evolution of scrolls in computers 3r33510. 3r33511.  3r33535.

1. Rows (and columns)

3r33511.  3r33535. After the advent of the web, designers invented /explored many ways to paginate /scroll content. Before the Internet, we scrolled lines on the screen. 3r33511.  3r33535. 3r33511.  3r33535. Horizontal scrolling made the scrolling tool not only for reading the content, but also for navigating the screen. 3r33511.  3r33535. 3r33511.  3r33535.

2. Windows (not an operating system) 3r3383. 3r33511.  3r33535. Having a scroll pushed people to create a window interface. With the help of windows, you can simultaneously view several pieces of content. 3r33511.  3r33535. 3r33511.  3r33535. In the Program Manager Windows 3.1 several “scrolls” 3r3447. 3r33448. 3r33511.  3r33535. 3r33511.  3r33535.
3. Web pages

3r33511.  3r33535. Scrolling decides the most the fundamental problem when browsing the web. However, it can cause many problems for users and can prevent them. Let's take a closer look. 3r33511.  3r33535. 3r33511.  3r33535.
Options for navigating web pages 3r33510. 3r33511.  3r33535. I will try to determine how developers and designers created an interface for navigating web pages. 3r33511.  3r33535. 3r33511.  3r33535. Let's start with some server systems pagination. 3r33511.  3r33535. 3r33511.  3r33535.

Layout of pages based on the offset

3r33511.  3r33535. The most famous pagination system. In this technique, you first need to find how many elements need to be paginated:
 3r33535. 3r33511.  3r33535.
- All posts count
SELECT COUNT (*) AS total FROM posts 3r33511.  3r33535. After that you need to count the pages. Suppose we show 10 elements on the page:
 3r33535. 3r33511.  3r33535.

    - First page items
SELECT * FROM posts LIMIT 10    

3r33511.  3r33535. And if we want to go to page 3 then you need to skip the first 30 elements using the offset ( OFFSET ):
 3r33535. 3r33511.  3r33535.

    - Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30    

3r33511.  3r33535. Information is sent to the client as follows: 3r33511.  3r33535. 3r33511.  3r33535.

    {3r33523. pagination: {3r33523. "items_count": 10?
"current": ? 3r32323. "total_pages": 10
}, 3r32323. "items":[]3r33535.}    

3r33511.  3r33535.

Pros and cons of pagination based on bias:

3r33511.  3r33535.

•  3r33535.
• Good : go to any page easily.  3r33535.
• Good : more free option for user  3r33535.
• Poor : performance issues with  3r33535.
• Poor : Duplicate elements may be displayed when changing data.  3r33535.

3r33511.  3r33535.

Pagination on the

pointer. 3r33511.  3r33535. Big data makes it difficult to calculate the tables, because the data is constantly arriving (think about Twitter). Thus, the developers came up with new methods for pagination: 3r33385. following signs [/b] (cursor). 3r33511.  3r33535. 3r33511.  3r33535. Each line is assigned a unique pointer. No need to cheat the entire table and know the exact number of pages: 3r3353511.  3r33535. 3r33511.  3r33535.

    - Get extra 1 item to get its cursor. 3r33535. SELECT * FROM posts ORDER BY id DESC LIMIT 11    

3r33511.  3r33535. Suppose that each message has a unique pointer (the ID in this example) for pagination. The customer will receive the following information: 3r33511.  3r33535. 3r33511.  3r33535.

    {3r33523. pagination: {3r33523. "next": 1234 //extra item's ID (cursor), null if end of data. 3r33535.}, 3r32323. "items":[]3r33535.}    

3r33511.  3r33535. And you can request the next page with the help of the pointer: 3r33511.  3r33535. 3r33511.  3r33535.

    - Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id> = 1234 ORDER BY id LIMIT 11  
3r33511.  3r33535.  
  Pros and cons of pagination on pointers:  
  3r33511.  3r33535.
 3r33535.
Good
: more productive, there is no calculation of the table
 3r33535.
Good
: displaying duplicate elements is not possible if someone inserts a row in the center of the table 3r-32r.  3r33535.
Poor
: it is impossible to go to any page
 3r33535.
Poor
: restrictions for the client, the total number of pages and the current page number
are unknown.  3r33535.
3r33511.  3r33535. Consider some methods of navigation. 3r33511.  3r33535. 3r33511.  3r33535.  
  Next and previous  
  3r33511.  3r33535. 3r33385. Action  [/b]  : based on clicks
 3r33535. 3r33385. Technique  [/b]  : based on offset or following signs 3r33511.  3r33535. 3r33511.  3r33535. It is mainly used to navigate blogs. This is the oldest version of infinite scrolling. With this approach, the user may not know where the content ends. 3r33511.  3r33535. 3r33511.  3r33535.    WordPress pagination
3r33448. 3r33511.  3r33535. 3r33511.  3r33535.  
  Pagination  
  3r33511.  3r33535. 3r33385. Action  [/b]  : based on clicks
 3r33535. 3r33385. Technique  [/b]  : based on the offset
 3r33535. 3r33511.  3r33535. In my opinion, this is the most convenient type of navigation. It uses pagination based on the offset, which allows you to go to the desired page, and also with one click go to the end or the beginning. 3r33511.  3r33535. 3r33511.  3r33535.    Examples of numbering
3r33448. 3r33511.  3r33535. 3r33511.  3r33535. Google uses this navigation in search results: 3r33511.  3r33535. 3r33511.  3r33535. 3r33337. 3r33511.  3r33535. 3r33511.  3r33535.  
  Load  
  more. 3r33511.  3r33535. 3r33385. Action  [/b]  : trigger
 3r33535. 3r33385. Technique  [/b]  : based on pointers,    although it can be implemented on the basis of bias, but it will be inconvenient    3r33511.  3r33535. 3r33511.  3r33535. This is one of the newest pagination methods, it also uses the previous version of infinite scrolling. 3r33511.  3r33535. 3r33511.  3r33535. 3r33333. 3r33511.  3r33535. 3r33434.
Download More button
3r33448. 3r33511.  3r33535. 3r33511.  3r33535. In the example above, the user clicks the Load More button to see more content. 3r33511.  3r33535. 3r33511.  3r33535.  
  Infinite scrolling  
  3r33511.  3r33535. 3r33385. Action  [/b]  : based on scrolling
 3r33535. 3r33385. Technique  [/b]  : based on pointers,  [i]  although it can be implemented on the basis of bias, it will be VERY inconvenient 3r-3448. 3r33511.  3r33535. 3r33511.  3r33535. Infinite scrolling is the latest pagination technique based on pointers. 3r33511.  3r33535. 3r33511.  3r33535. 3r3013. Hugh Williams claims that 3r33398. invented endless scrolling in 2005 for Microsoft 3r3403. . 3r3404. 3r3013. 3r3402. Metafizzy
developed an open source tool to help developers realize endless scrolling. 3r3404. 3r33511.  3r33535. 3r3407. 3r33511.  3r33535. 3r33434.
Infinite scrolling allows you to scroll the page to infinity
3r33448. 3r33511.  3r33535. 3r33511.  3r33535.
Stop making sites with endless scrolling! 3r33510. 3r33511.  3r33535. So far we have been considering how to get here. Now let's talk about why it is so bad. 3r33511.  3r33535. 3r33511.  3r33535.  
  Search footer  
  3r33511.  3r33535. The footer is the basic unit of the anatomy of a web page, just like the header. Sites provide details and links there: phone numbers, addresses, links to help and support topics. If users search for this information, they usually scroll the page down to the footer. 3r33511.  3r33535. 3r33511.  3r33535. With endless scrolling, users find it difficult to find a footer, because it’s impossible to see the end of the page. The inability to reach the footer can strain the user (which is not great). 3r33511.  3r33535. 3r33511.  3r33535. Sites with endless scrolling (for example, Twitter) solve the problem by placing the necessary information and links in the sidebar. The sidebar is a solution, but not a good one. Footer must remain footer. 3r33511.  3r33535. 3r33511.  3r33535. 3r3442. 3r33511.  3r33535. 3r33434.
Twitter footer on the right sidebar
3r33448. 3r33511.  3r33535. 3r33511.  3r33535.  
  Do not use endless scrolling if you do not have a timeline or a  
  tape. 3r33511.  3r33535. Social networking applications work with the timeline. Users tend to navigate in time, work with the past. In this case, endless scrolling simplifies navigation. Here it is good for performance, especially in mobile devices. 3r33511.  3r33535. 3r33511.  3r33535. But if you have an e-commerce site, a newsletter, a magazine or a blog, then the desire of users to navigate through elements or articles, and then endless scrolling becomes a nightmare for them. In the timeline list, people generally don’t look for a date or a unique item. In lists based on items, the user wants to find the specific item. The endless scrolling makes it almost impossible. 3r33511.  3r33535. 3r33511.  3r33535.  
  Give users more control of  
  3r33511.  3r33535. Users generally do not like a UI that they cannot control. 3r33511.  3r33535. 3r33511.  3r33535. The scrolling event does not explicitly lead to the intention to do something. People move around the page, and if they want to perform an action, they usually click or touch the screen (these are triggers). They inform the UI of their decision. But endless scrolling works without any solution. 3r33511.  3r33535. 3r33511.  3r33535. Infinite scrolling makes pages less manageable. Users may also encounter jumping glitches. 3r33511.  3r33535. 3r33511.  3r33535. Instead of scrolling endlessly, put the “Load More” button, which is a trigger. This will give the user control. (I would prefer the old style of page numbering, but we assume that we are now using pagination on pointers). 3r33511.  3r33535. 3r33511.  3r33535.  
  Allow users to go where they want  
  3r33511.  3r33535. People move through the pages, save some to bookmarks, share with friends, etc. 3r33511.  3r33535. 3r33511.  3r33535. However, the endless scrolling cannot preserve state in its essence. Users cannot share the current status. It also means that you cannot track user activity with analytics tools. 3r33511.  3r33535. 3r33511.  3r33535. If your internal pagination method is pointer-based, it’s almost impossible for users to arbitrarily navigate. If you have an e-commerce site, then let your users navigate to the right products. 3r33511.  3r33535. 3r33511.  3r33535. In addition, if there is a “Sort by” function in the list, need to show the user the pagination. If the list is in alphabetical order, do not force people to scroll through the list to the letter K, otherwise they will go crazy. 3r33511.  3r33535. 3r33511.  3r33535. It is necessary to show the user where he is. When he refreshes the page with endless scrolling, he will be thrown back to the very beginning, and he will have to scroll down again to the place where he was before. 3r33511.  3r33535. 3r33511.  3r33535.
Conclusion 3r33510. 3r33511.  3r33535. Infinite scrolling is good in some cases, but as a rule, it creates more problems than it solves. Designers should not consider endless scrolling as a silver bullet that solves all problems with pagination. Stop making sites with endless scrolling! 3r? 3519. 3r33535. 3r33535. 3r? 3516. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r? 3517. 3r33535. 3r? 3519. 3r33535. 3r33535. 3r33535. 3r33535.