Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Pattern: Scrolling

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ArticleMetaData and RevieweApproval)
lpvalente (Talk | contribs)
m (Lpvalente -)
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
 +
[[Category:Mobile Design Patterns]]
 
{{ArticleMetaData <!-- v1.1 -->
 
{{ArticleMetaData <!-- v1.1 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 23: Line 24:
 
}}
 
}}
  
[[Category:Mobile Design]]
+
 
[[Category:Mobile Design Patterns]]
+
 
Scrolling is defined as sliding text, images, videos, etc on a webpage, application or a document, which cannot be fully shown on the screen at time.
+
{{Abstract|Scrolling is defined as sliding text, images, videos, etc on a webpage, application or a document, which cannot be fully shown on the screen at time.
  
 
Two types of scrolling designs may be employed,  
 
Two types of scrolling designs may be employed,  
 
* Continuous scrolling
 
* Continuous scrolling
 
* Page-by-page scrolling
 
* Page-by-page scrolling
<br>
+
 
In this article we shall use the [http://www.opera.com/mobile/download/ Opera mini application] as an example to illustrate both types of scrolling. Opera mini browser has both types of scrolling options available to its users.
+
In this article we shall use the [http://www.opera.com/mobile/download/ Opera mini application] as an example to illustrate both types of scrolling. Opera mini browser has both types of scrolling options available to its users.}}
  
 
==Continuous scrolling==
 
==Continuous scrolling==

Latest revision as of 19:45, 4 December 2012

Article Metadata
Article
Created: croozeus (20 May 2009)
Last edited: lpvalente (04 Dec 2012)


Scrolling is defined as sliding text, images, videos, etc on a webpage, application or a document, which cannot be fully shown on the screen at time.

Two types of scrolling designs may be employed,

  • Continuous scrolling
  • Page-by-page scrolling

In this article we shall use the Opera mini application as an example to illustrate both types of scrolling. Opera mini browser has both types of scrolling options available to its users.

[edit] Continuous scrolling

For Continuous scrolling it is required to avoid discontinuous movement/sliding of or in other words - to avoid jumps. For example, as shown in the image below, the webpage undergoes gradual uplift (the page moves upward) when the user scrolls by pressing/touching the down key or scrollbar. Similarly the page would move downward when the user presses/touches the up key.

Continuous Scrolling.jpg


[edit] Page-by-page scrolling

When a user needs to scroll quickly downwards or upward, page-by-page scrolling is preferred over continuous scrolling. In page-by-page scrolling when the user scrolls, the screen moves upward or downward respectively, screen by screen. For example, as shown in the image below, when the user presses the down key the screen moves downward.

PagebyPage Scrolling.jpg


Submitted by croozeus 17:31, 20 May 2009 (EEST)

  • croozeus
This page was last modified on 4 December 2012, at 19:45.
124 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×