Skip to page content

滚动区域

QScrollArea 组件通过封装您的内容,提供了一种自定义滚动条的简洁方法。可以将其视为具有 overflow: auto 的 DOM 元素,但使用您自己的自定义样式滚动条代替浏览器的默认滚动条,并在此基础上提供一些不错的功能。

QScrollArea API

用法

以下示例最好在桌面设备上查看,因为在移动设备上意义不大。

TIP

您还可以查看布局抽屉以查看更多实际应用的示例。

基础用法

样式定制

暗色设计

控制滚动条可见性

当使用 visible 布尔属性时,默认的鼠标悬停/离开行为被禁用,让您完全控制滚动条的可见性。

延迟

当内容变化时,滚动条会出现然后再次消失。您可以设置一定的延迟(以毫秒为单位的时间)来控制滚动条在消失前的显示时间(如果组件未被悬停):

延迟



滚动位置

滚动事件

下面是使用 @scroll 事件在两个容器之间同步滚动的示例。

无障碍访问
v2.25+

自定义滚动条及其滑块对辅助技术隐藏——它们是对原生可滚动容器的冗余的、仅指针可用的控件。

当内容实际溢出时,滚动容器本身会成为一个 Tab 焦点,因此浏览器原生的键盘滚动——方向键、PageUp/PageDownHome/End——无需任何设置即可工作(WCAG 2.1.1)。内容未溢出的 QScrollArea 不会进入 Tab 顺序,因为没有内容需要滚动。tabindex 属性仍可覆盖这两种情况——传入 -1 可完全退出。