{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# `ui.ui.scroll_area`\n",
    "\n",
    "## 滚动区域\n",
    "\n",
    "通过封装内容来自定义滚动条。此元素公开了 Quasar [ScrollArea](https://quasar.dev/vue-components/scroll-area/) 组件。\n",
    "\n",
    "`on_scroll`：滚动位置改变时要调用的函数"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.row():\n",
    "    with ui.scroll_area().classes('w-32 h-32 border'):\n",
    "        ui.label('I scroll. ' * 20)\n",
    "    with ui.column().classes('p-4 w-32 h-32 border'):\n",
    "        ui.label('I will not scroll. ' * 10)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 处理滚动事件\n",
    "\n",
    "您可以在 `ui.scroll_area` 中使用 `on_scroll` 参数来处理滚动事件。回调函数会接收一个带有以下属性的 `ScrollEventArguments` 对象：\n",
    "\n",
    "- `sender`：生成事件的滚动区域\n",
    "- `client`：匹配的客户端\n",
    "- 其他参数如 Quasar 文档中针对 [ScrollArea API 所述](https://quasar.dev/vue-components/scroll-area/#qscrollarea-api)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "position = ui.number('scroll position:').props('readonly')\n",
    "with ui.card().classes('w-32 h-32'):\n",
    "    with ui.scroll_area(on_scroll=lambda e: position.set_value(e.vertical_percentage)):\n",
    "        ui.label('I scroll. ' * 20)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 设置滚动位置\n",
    "\n",
    "您可以使用 `scroll_to` 来以编程方式设置滚动位置。这对于导航或多个滚动区域的同步非常有用。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.number('position', value=0, min=0, max=1, step=0.1,\n",
    "          on_change=lambda e: area1.scroll_to(percent=e.value)).classes('w-32')\n",
    "\n",
    "with ui.row():\n",
    "    with ui.card().classes('w-32 h-48'):\n",
    "        with ui.scroll_area(on_scroll=lambda e: area2.scroll_to(percent=e.vertical_percentage)) as area1:\n",
    "            ui.label('I scroll. ' * 20)\n",
    "\n",
    "    with ui.card().classes('w-32 h-48'):\n",
    "        with ui.scroll_area() as area2:\n",
    "            ui.label('I scroll. ' * 20)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}