1# Visible Area Change Event
2
3The visible area change event of a component refers to the change in the visual portion of the component on the screen. It can be used to determine whether the component is completely or partially displayed on the screen. It is usually applicable to scenarios such as advertisement exposure tracing.
4
5> **NOTE**
6>
7>  The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
8
9## onVisibleAreaChange
10
11onVisibleAreaChange(ratios: Array<number>, event: (isVisible: boolean, currentRatio: number) => void): T
12
13Called when the visible area of the component changes.
14
15**Atomic service API**: This API can be used in atomic services since API version 11.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters** 
20
21| Name | Type                                               | Mandatory | Description                                                        |
22| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
23| ratios | Array&lt;number&gt;                                 | Yes  | Threshold array. Each threshold represents a ratio of the component's visible area (that is, the area of the component that is visible on screen; only the area within the parent component is counted) to the component's total area. This callback is invoked when the ratio of the component's visible area to its total area is greater than or less than the threshold. The value range of the threshold is [0.0, 1.0]. If the threshold set exceeds this range, the value **0.0** or **1.0** will be used.<br>**NOTE**<br>When the value is close to the boundary 0 or 1, it is rounded off with a round-off error not greater than 0.001. For example, 0.9997 is rounded off to 1. |
24| event  | (isVisible: boolean, currentRatio: number) => void) | Yes  | - **isVisible**: whether the ratio of the component's visible area to its total area is greater than the previous one. The value **true** means that the ratio is greater than the previous one, and **false** means the opposite.<br>- **currentRatio**: ratio of the component's visible area to its total area when this callback is invoked. |
25
26**Return value**
27
28| Type | Description |
29| -------- | -------- |
30| T | Current component. |
31
32> **NOTE**
33>
34> This API applies only to the scenario where the component's layout area exceeds or is not within the current screen display area. It does not apply to the scenario where the visible area changes due to component stacking (by using [\<Stack>](ts-container-stack.md) or [z-order control](ts-universal-attributes-z-order.md)) or as a result of calling transformation APIs such as **offset** or **translate**. Any area of a component that extends beyond its parent component regarded as an invisible area.
35
36
37## Example
38
39```ts
40// xxx.ets
41@Entry
42@Component
43struct ScrollExample {
44  scroller: Scroller = new Scroller()
45  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
46  @State testTextStr: string = 'test'
47  @State testRowStr: string = 'test'
48
49  build() {
50    Column() {
51      Column() {
52        Text(this.testTextStr)
53          .fontSize(20)
54
55        Text(this.testRowStr)
56          .fontSize(20)
57      }
58      .height(100)
59      .backgroundColor(Color.Gray)
60      .opacity(0.3)
61
62      Scroll(this.scroller) {
63        Column() {
64          Text("Test Text Visible Change")
65            .fontSize(20)
66            .height(200)
67            .margin({ top: 50, bottom: 20 })
68            .backgroundColor(Color.Green)
69              // Set ratios to [0.0, 1.0] to invoke the callback when the component is fully visible or invisible on screen.
70            .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
71              console.info('Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio)
72              if (isVisible && currentRatio >= 1.0) {
73                console.info('Test Text is fully visible. currentRatio:' + currentRatio)
74                this.testTextStr = 'Test Text is fully visible'
75              }
76
77              if (!isVisible && currentRatio <= 0.0) {
78                console.info('Test Text is completely invisible.')
79                this.testTextStr = 'Test Text is completely invisible'
80              }
81            })
82
83          Row() {
84            Text('Test Row Visible  Change')
85              .fontSize(20)
86              .margin({ bottom: 20 })
87
88          }
89          .height(200)
90          .backgroundColor(Color.Yellow)
91          .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
92            console.info('Test Row isVisible:' + isVisible + ', currentRatio:' + currentRatio)
93            if (isVisible && currentRatio >= 1.0) {
94              console.info('Test Row is fully visible.')
95              this.testRowStr = 'Test Row is fully visible'
96            }
97
98            if (!isVisible && currentRatio <= 0.0) {
99              console.info('Test Row is completely invisible.')
100              this.testRowStr = 'Test Row is completely invisible'
101            }
102          })
103
104          ForEach(this.arr, (item:number) => {
105            Text(item.toString())
106              .width('90%')
107              .height(150)
108              .backgroundColor(0xFFFFFF)
109              .borderRadius(15)
110              .fontSize(16)
111              .textAlign(TextAlign.Center)
112              .margin({ top: 10 })
113          }, (item:number) => (item.toString()))
114
115        }.width('100%')
116      }
117      .backgroundColor(0x317aff)
118      .scrollable(ScrollDirection.Vertical)
119      .scrollBar(BarState.On)
120      .scrollBarColor(Color.Gray)
121      .scrollBarWidth(10)
122      .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
123        console.info(xOffset + ' ' + yOffset)
124      })
125      .onScrollEdge((side: Edge) => {
126        console.info('To the edge')
127      })
128      .onScrollStop(() => {
129        console.info('Scroll Stop')
130      })
131
132    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
133  }
134}
135```
136
137![en-us_visible_area_change.gif](figures/en-us_visible_area_change.gif)
138