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.

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 with 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 need to set after page component 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

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

Methods

Summary

boolean enableHandler(boolean enable) 

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>