Scroll Handler

The scroll handler component is an extension of the scroll view component, and it adds a scroll button that the user can grab (click) and drag for scrolling the page.

Note
This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0.
To support Backward compatibility, please import tau.support-2.3.js.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Options
  5. Events
  6. Methods

Default Selectors

By default, all elements with the data-handler="true" attribute are displayed as a scroll handler.

Manual Constructor

To manually create a scroll view with a scroll handler component, use the component constructor from the tau namespace (RECOMMENDED):

  • ScrollHandler needs to be set after page component is created completely because it has dependency for the page component.

<div data-role="page" id="myPage">
   <div data-role="content">
      pagecontent
   <div>
</div>
<script>
   var myPage = document.getElementById("myPage"),
       handlerElement = myPage.querySelector("[data-role=content]");

   myPage.addEventListener("pageshow", function() 
   {
      tau.widget.ScrollHandler(handlerElement);
   });
</script>

If the jQuery library is loaded, you can use its method (support for backward compatibility):

<div data-role="page" id="myPage">
   <div data-role="content">
      pagecontent
   <div>
</div>
<script>
   $("#myPage").on("pageshow", function() 
   {
      $("#myPage > div[data-role=content]").scrollhandler();
   });
</script>

HTML Examples

  • To create a scroll view with a scroll handler using data-handler attribute:
    <div data-role="page">
       <div data-role="content" data-handler="true">
          page content
       </div>
    </div>
    

Options

The options for a component can be defined as data-... attributes or passed as parameters to the constructor.

You can change an option for the component using the option method.

Summary

Option Input type Default value Description
data-direction "x" | "y" "y" Direction of the handler.
data-handler boolean true Sets whether the scroll handler is enabled.
data-scroll "x" | "y" | "xy" "y" Scrolling direction.

Enabling the Handler

You can enable the scroll handler:

  • With the data-handler option:
    <div data-role="page" id="myPage">
       <div data-role="content" data-handler="true">
          pagecontent
       <div>
    </div>
    
  • By passing an object to the constructor (RECOMMENDED):
    <div data-role="page" id="myPage">
       <div data-role="content">
          pagecontent
       <div>
    </div>
    <script>
       var myPage = document.getElementById("myPage"),
           handlerElement = myPage.querySelector("[data-role=content]");
    
       myPage.addEventListener("pageshow", function() 
       {
          tau.widget.ScrollHandler(handlerElement, {"handler": true});
       });
    </script>
    
  • By using the jQuery API (support for backward compatibility):
    <div data-role="page" id="myPage">
       <div data-role="content">
          pagecontent
       <div>
    </div>
    <script>
       $("#myPage").on("pageshow", function() 
       {
          $("#myPage > div[data-role=content]").scrollhandler({"handler": true});
       });
    </script>
    

Handler Direction

You can set the direction in which the handler is presented. The default value ("y") means a vertical scroll button.

You can set the direction:

  • With the data-direction option:
    <div data-role="page" id="myPage">
       <div data-role="content" data-direction="y" data-handler="true">
          pagecontent
       <div>
    </div>
    
  • By passing an object to the constructor (RECOMMENDED):
    <div data-role="page" id="myPage">
       <div data-role="content">
          pagecontent
       <div>
    </div>
    <script>
       var myPage = document.getElementById("myPage"),
           handlerElement = myPage.querySelector("[data-role=content]");
    
       myPage.addEventListener("pageshow", function() 
       {
          tau.widget.ScrollHandler(handlerElement, {"scroll": "y"});
       });
    </script>
    
  • By using the jQuery API (support for backward compatibility):
    <div data-role="page" id="myPage">
       <div data-role="content">
          pagecontent
       <div>
    </div>
    <script>
       $("#myPage").on("pageshow", function() 
       {
          $("#myPage > div[data-role=content]").scrollhandler({"scroll": "y"});
       });
    </script>
    

Scrolling Direction

You can set the direction to which the handler scrolls. The default value ("y") means vertical.

You can set the direction:

  • With the data-scroll option:
    <div data-role="page" id="myPage">
       <div data-role="content" data-scroll="x" data-handler="true">
          pagecontent
       <div>
    </div>
    
  • By passing an object to the constructor (RECOMMENDED):
    <div data-role="page" id="myPage">
       <div data-role="content">
          pagecontent
       <div>
    </div>
    <script>
       var myPage = document.getElementById("myPage"),
           handlerElement = myPage.querySelector("[data-role=content]");
    
       myPage.addEventListener("pageshow", function() 
       {
          tau.widget.ScrollHandler(handlerElement, {"scroll": "x"});
       });
    </script>
    
  • By using the jQuery API (support for backward compatibility):
    <div data-role="page" id="myPage">
       <div data-role="content">
          pagecontent
       <div>
    </div>
    <script>
       $("#myPage").on("pageshow", function() 
       {
          $("#myPage > div[data-role=content]").scrollhandler({"scroll": "x"});
       });
    </script>
    

Events

The following table lists the events related to the scroll handler component.

Summary

Name Description
scrollstart

Triggered when the scrolling operation starts.

scrollupdate

Triggered when the scroll is being updated.

scrollstop

Triggered when the scrolling stops.

Methods

Summary

Method Description
boolean enableHandler ( boolean enable ) 

Enables or disables the handler.

enableHandler

Enables or disables the handler.

boolean enableHandler ( boolean enable) 

Parameters:

Parameter Type Required/optional Default value Description
enable boolean Required

Return value:

Type Description
boolean

Code example (TAU API RECOMMENDED):

<div data-role="page" id="myPage">
   <div data-role="content">
      pagecontent
   <div>
</div>
<script>
   var myPage = document.getElementById("myPage"),
       handlerElement = myPage.querySelector("[data-role=content]"),
       scrollhandler;

   myPage.addEventListener("pageshow", function() 
   {
      tau.widget.ScrollHandler(handlerElement);
      scrollhandler.enableHandler(true);
   });
</script>

Code example (jQuery API support for backward compatibility):

<div data-role="page" id="myPage">
   <div data-role="content">
      pagecontent
   <div>
</div>
<script>
   #("#myPage > div[data-role=content]").scrollhandler("enableHandler", true);
</script>