# 文档

**Repository Path**: fredranking/file

## Basic Information

- **Project Name**: 文档
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-21
- **Last Updated**: 2024-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

嵌套滚动官方接口：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-list.md#onscrollframebegin9


```
使用demo：

import web_webview from '@ohos.web.webview';
@Entry
@Component
export struct WebScrollerDemo {
  private scrollTouchDown: boolean = false;
  private webTouchDown: boolean = false;
  private scrolling: boolean = false;
  private scroller: Scroller = new Scroller()
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Scroll(this.scroller) {
      Column() {
        Text("Scroll Area").width("100%").height(400).backgroundColor(0X330000FF).fontSize(16).textAlign(TextAlign.Center)
        Web({ controller: this.controller, src: "https://baijiahao.baidu.com/s?id=1778113237500106256&wfr=spider&for=pc", }).height("100%").width("100%")
          .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
          .onTouch((event: TouchEvent) => {
            if (event.type == TouchType.Down) { this.webTouchDown = true; } else if (event.type == TouchType.Up) { this.webTouchDown = false; }
          })
      }.width("100%")
    }.onTouch((event: TouchEvent) => {
      if (event.type == TouchType.Down) {
        this.scrollTouchDown = true;
      } else if (event.type == TouchType.Up) {
        this.scrollTouchDown = false;
      }
    }).onScrollFrameBegin((offset: number, state: ScrollState) => {
      let yOffset: number = this.scroller.currentOffset().yOffset
      if (this.scrolling && offset > 0) {
        if (yOffset >= 400) {
          this.controller.scrollBy(0, offset)
          return { offsetRemain: 0 }
        } else if (yOffset + offset > 400) {
          this.controller.scrollBy(0, yOffset + offset - 400)
          return { offsetRemain: 400 - yOffset }
        }
      }
      return { offsetRemain: offset }
    }).onScrollStart(() => {
      if (this.scrollTouchDown && !this.webTouchDown) { this.scrolling = true; }
    }).onScrollStop(() => {
      this.scrolling = false;
    }).edgeEffect(EdgeEffect.Spring).backgroundColor('#DCDCDC').scrollBar(BarState.On).width('100%').height('100%')
  }
}
```


==============================
400表示上面原生组件的高度
核心在

```
onScrollFrameBegin((offset: number, state: ScrollState) => {
let yOffset: number = this.scroller.currentOffset().yOffset
if (this.scrolling && offset > 0) {
if (yOffset >= 400) {
this.controller.scrollBy(0, offset)
return { offsetRemain: 0 }
} else if (yOffset + offset > 400) {
this.controller.scrollBy(0, yOffset + offset - 400)
return { offsetRemain: 400 - yOffset }
}
}
return { offsetRemain: offset }
}).onScrollStart(() => {
if (this.scroll
```

================================

其他demo1：


```
@Entry
@Component
struct StickyNestedScroll {
  @State message: string = 'Hello World'
  @State arr: number[] = []
  private touchDown: boolean = false;
  private listTouchDown: boolean = false;
  private scrolling: boolean = false;
  private scroller: Scroller = new Scroller()
  private listScroller: Scroller = new Scroller()

  @Styles listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        Text("Scroll Area")
          .width("100%")
          .height("400")
          .backgroundColor('#0080DC')
          .textAlign(TextAlign.Center)
        Tabs({barPosition:BarPosition.Start}) {
          TabContent() {
            List({space:10, scroller:this.listScroller}) {
              ForEach(this.arr, (item:number) => {
                ListItem() {
                  Text("item" + item)
                    .fontSize(16)
                }.listCard()
              }, (item:number) => item.toString())
            }.width("100%")
            .edgeEffect(EdgeEffect.Spring)
            .nestedScroll({
              scrollForward:NestedScrollMode.PARENT_FIRST,
              scrollBackward:NestedScrollMode.SELF_FIRST
            })
            .onTouch((event:TouchEvent) => {
              if (event.type == TouchType.Down) {
                this.listTouchDown = true;
              } else if (event.type == TouchType.Up) {
                this.listTouchDown = false;
              }
            })
          }.tabBar("Tab1")
          TabContent() {
          }.tabBar("Tab2")
        }
        .vertical(false)
        .height("100%")
      }.width("100%")
    }.onTouch((event:TouchEvent) => {
      if (event.type == TouchType.Down) {
        this.touchDown = true;
      } else if (event.type == TouchType.Up) {
        this.touchDown = false;
      }
    })
    .onScrollFrameBegin((offset: number, state: ScrollState) => {
      if (this.scrolling && offset > 0) {
        let yOffset:number = this.scroller.currentOffset().yOffset
        if (yOffset >= 400) {
          this.listScroller.scrollBy(0, offset)
          return {offsetRemain:0}
        } else if (yOffset + offset > 400 ) {
          this.listScroller.scrollBy(0, yOffset + offset - 400)
          return {offsetRemain:400 - yOffset}
        }
      }
      return {offsetRemain:offset}
    })
    .onScrollStart(()=>{
      if (this.touchDown && !this.listTouchDown) {
        this.scrolling = true;
      }
    })
    .onScrollStop(()=>{
      this.scrolling = false;
    })
    .edgeEffect(EdgeEffect.Spring)
    .backgroundColor('#DCDCDC')
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }
  aboutToAppear() {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i)
    }
  }
}
```


其他三层嵌套demo2：


```
@Entry
@Component
struct StickyNestedScroll {
  @State arr: number[] = []
  private scroller:Scroller = new Scroller();

  @Styles listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  build() {
    Scroll() {
      Column() {
        TextInput()
        Column() {
          Text("Title Area")
            .width("100%")
            .height("100")
            .backgroundColor('#0080DC')
            .textAlign(TextAlign.Center)
          Scroll() {
            Column() {
              Row() {
                Text("收藏").width("50%")
                  .textAlign(TextAlign.Center)
                Text("历史").width("50%")
                  .textAlign(TextAlign.Center)
              }.height("64").width("100%")
              .backgroundColor(Color.Green)

              List({ space: 10 , scroller:this.scroller}) {
                ForEach(this.arr, (item: number) => {
                  ListItem() {
                    Text("item" + item)
                      .fontSize(16)
                  }.listCard()
                }, (item: number) => item.toString())
              }.width("100%")
              .edgeEffect(EdgeEffect.None)
              .nestedScroll({
                scrollForward: NestedScrollMode.PARENT_FIRST,
                scrollBackward: NestedScrollMode.PARENT_FIRST
              })
              .height("100%")
            }
          }
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST
          })
          .layoutWeight(1)
          .edgeEffect(EdgeEffect.None)
          .scrollBar(BarState.Off)
        }.height("100%")
      }.width("100%")
    }
    .onScrollFrameBegin((offset: number, state: ScrollState)=>{
      if (this.scroller.currentOffset().yOffset > 0) {
        return {offsetRemain:0}
      }
      return {offsetRemain:offset}
    })
    .edgeEffect(EdgeEffect.None)
    .backgroundColor('#DCDCDC')
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }
  aboutToAppear() {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i)
    }
  }
}
```