Scroll TAU Basic page with bezel

Read edit

Hi together. I’m coding a timetable app for school. My device is a Galaxy Watch and running on One UI 1.5 and Tizen version The Galaxy Watch has a scroll bezel. I have a basic TAU html app not a TAU list and I’m trying to use the bezel to scroll through the div. I’ve seen this tutorial online but it doesn’t work or I don’t know where to add it to the code. How would I be able to scroll through the following HTML page including the “header” or more title of the app?

!DOCTYPE html>
meta name=“viewport” content=“width=device-width,user-scalable=no”>
link rel=“stylesheet” href=“lib/tau/wearable/theme/default/tau.min.css”>
link rel=“stylesheet” media=“all and (-tizen-geometric-shape: circle)” href=“lib/tau/wearable/theme/default/”>
!-- load theme file for your application -->
link rel=“stylesheet” href=“css/style.css”>
div class=“ui-page ui-page-active ui-scroller” id=“main”>
header class=“ui-header”>
h2 class=“ui-title”>Timetable
div class=“ui-content ui-content-padding”>
p>Hello World!

p>Hello World!
p>Hello World!
p>Hello World!
p>Hello World!
p>Hello World!
p>Hello World!
p>Hello World!
p>Hello World!
script src=“lib/tau/wearable/js/tau.min.js”>
script src=“js/app.js”>
script src=“js/lowBatteryCheck.js”>
script src=“js/circle-helper.js”>

I had to remove some opening tags because the forum formated the code automatically. The code like that is working and I can scroll through everything with my touchscreen but not the bezel

Edit: I now finally realized what I did wront. I didn’t add the js code to the app.js file

The new question then is how to create an animation that the scrolling doesn’t jump but smoothly scrolls

1 Like

Simple answer: Apply your own CSS to animate.

Tizen does not have such library to meet your goal!

Just put your own styles. Look at this simple example:

to avoid horizontal scroll you can change to overflow: auto;