Languages

Menu
Sites
Language
Scrolling content with Bezel

Hello,

Is there a simple way to make any content (such as a <div> with class ui-content) scroll using the bezel while using the tau framework?

The hebavior seems limited to ui-list and its children. 

I have already tried using the rotary event listener to manipulate the scrollTop property but it doesn't seem to work. On a normal website, changing scrollTop on the body tag does the trick but with tau.....

Is there code snippet, anything at all?

List

Responses

4 Replies
Juan Ospina

I'll reply again to my own question.

To get scrollTop to work via javascript, it has to be applied to the div with the class .ui-scroller that the tau framework creates.

Heeju Joo

Hello,

If you made your application with TAU, content can be scrolled with ".ui-scroller" class. Here is some snippet.

<!-- HTML -->
<div class="ui-page" id="main">
   <div class="ui-content">
      <!-- Fill contents -->
   </div>
</div>
// script
(function() {
    var SCROLL_STEP = 50;       // distance of moving scroll for each rotary event

    document.addEventListener("pagebeforeshow", function pageScrollHandler(e) {
        var page = e.target;
        elScroller = page.querySelector(".ui-scroller");

        // rotary event handler
        rotaryEventHandler = function(e) {
            if (elScroller) {
                if (e.detail.direction === "CW") { // Right direction
                    elScroller.scrollTop += SCROLL_STEP;
                } else if (e.detail.direction === "CCW") { // Left direction
                    elScroller.scrollTop -= SCROLL_STEP;
                }
            }
        };

        // register rotary event.
        document.addEventListener("rotarydetent", rotaryEventHandler, false);

        // unregister rotary event
        page.addEventListener("pagebeforehide", function pageHideHanlder() {
            page.removeEventListener("pagebeforehide", pageHideHanlder, false);
            document.removeEventListener("rotarydetent", rotaryEventHandler, false);
        }, false);
    }, false);
}());

 

Heeju Joo

Hello,

If you made your application with TAU, content can be scrolled with ".ui-scroller" class. Here is some snippet.

<!-- HTML -->
<div class="ui-page" id="main">
   <div class="ui-content">
      <!-- Fill contents -->
   </div>
</div>
// script
(function() {
    var SCROLL_STEP = 50;       // distance of moving scroll for each rotary event

    document.addEventListener("pagebeforeshow", function pageScrollHandler(e) {
        var page = e.target;
        elScroller = page.querySelector(".ui-scroller");

        // rotary event handler
        rotaryEventHandler = function(e) {
            if (elScroller) {
                if (e.detail.direction === "CW") { // Right direction
                    elScroller.scrollTop += SCROLL_STEP;
                } else if (e.detail.direction === "CCW") { // Left direction
                    elScroller.scrollTop -= SCROLL_STEP;
                }
            }
        };

        // register rotary event.
        document.addEventListener("rotarydetent", rotaryEventHandler, false);

        // unregister rotary event
        page.addEventListener("pagebeforehide", function pageHideHanlder() {
            page.removeEventListener("pagebeforehide", pageHideHanlder, false);
            document.removeEventListener("rotarydetent", rotaryEventHandler, false);
        }, false);
    }, false);
}());

 

Heeju Joo

Sorry for duplicated reply according to network error :( Please ignore this comment.