docs: added detailed examples

nicegui/elements/scroll_area.py

@@ -12,6 +12,7 @@ class ScrollArea(Element):
         """Scroll Area
 
         A way of customizing the scrollbars by encapsulating your content.
+        This element exposes the Quasar `ScrollArea <https://quasar.dev/vue-components/scroll-area/>`_ component
         """
         super().__init__('q-scroll-area')
         self._classes = ['nicegui-scroll']
@@ -32,6 +33,8 @@ class ScrollArea(Element):
                             axis: Literal['vertical', 'horizontal'] = 'vertical', duration_ms: int = 0
                             ) -> None:
         """
+        Set the scroll area position in percentage (float) or pixel number (int).
+        You can add a delay to the actual scroll action with the `duration_ms` parameter.
 
         :param offset: Scroll position offset from top in pixels or percentage (0.0 <= x <= 1.0) of the total scrolling
                         size

website/more_documentation/scroll_area_documentation.py

@@ -15,8 +15,42 @@ def main_demo() -> None:
 
 def more() -> None:
 
-    @text_demo('placeholder', '''
-        ...
+    @text_demo('Handling Scroll Events', '''
+        You can use the `on_scroll` argument in `ui.scroll_area` to handle scroll events.
+        The callback receives a `ScrollEventArguments` object with the following attributes:
+
+        - `sender`: the scroll_area object that generated the event
+        - `client`: the matching client
+        - `info`: the scroll area information as described in Quasar documentation ScrollArea API   
+          
+        The scroll info is represented as a `ScrollInfo` dataclass
+    ''')
+    def scroll_events():
+        number = ui.number(label='scroll position: ')
+        with ui.card().classes('w-48 h-32'):
+            with ui.scroll_area(on_scroll=lambda x: number.set_value(x.info.verticalPercentage)).classes('w-full'):
+                ui.label('I will scroll... ' * 10)
+
+    @text_demo('Setting the scroll position', '''
+        You can use the `set_scroll_position` method of `ui.scroll_area` to programmatically set the scroll position.
+        This can be useful for navigation or synchronization of multiple scroll_area elements
     ''')
-    async def placeholder():
-        ...
+    def scroll_events():
+        with ui.row():
+            with ui.column().classes('w-32'):
+                number = ui.number(label='scroll position', value=0, min=0, max=1,
+                                   on_change=lambda x: sa1.set_scroll_position(x.value)).classes('w-full')
+                ui.button(icon='add', on_click=lambda: number.set_value(number.value + 0.1))
+                ui.button(icon='remove', on_click=lambda: number.set_value(number.value - 0.1))
+
+            with ui.card().classes('w-48 h-48'):
+                with ui.scroll_area(
+                        on_scroll=lambda x: sa2.set_scroll_position(x.info.verticalPercentage)
+                ).classes('w-full') as sa1:
+                    ui.label('I will scroll... ' * 100)
+
+            with ui.card().classes('w-48 h-48'):
+                with ui.scroll_area().classes('w-full') as sa2:
+                    ui.label('I will scroll... ' * 100)
+
+