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.
By default, all elements with the data-handler="true"
attribute are displayed as with a scroll handler.
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>
data-handler
attribute:
<div data-role="page"> <div data-role="content" data-handler="true"> page content </div> </div>
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.
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. |
You can enable the scroll handler:
data-handler
option
<div data-role="page" id="myPage"> <div data-role="content" data-handler="true"> pagecontent <div> </div>
<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>
<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>
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:
data-direction
option
<div data-role="page" id="myPage"> <div data-role="content" data-direction="y" data-handler="true"> pagecontent <div> </div>
<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>
<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>
You can set the direction to which the handler scrolls. The default value ("y") means vertical.
You can set the direction:
data-scroll
option
<div data-role="page" id="myPage"> <div data-role="content" data-scroll="x" data-handler="true"> pagecontent <div> </div>
<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>
<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>
The following table lists the events related to the scroll handler component.
Name | Description |
---|---|
scrollstart | Triggered when the scrolling operation starts. |
scrollupdate | Triggered when the scroll is being updated. |
scrollstop | Triggered when the scrolling stops. |
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>