---
title:
  zh-CN: bixi-scroll-y-shadow
  en-US: bixi-scroll-y-shadow
order: 2
---

加在可滚动容器上，可以暗示上下两侧是否有内容。

```ts
import { Component } from '@angular/core';
@Component({
  selector: 'bixi-scroll-y-demo',
  template: `
    <div class="scroll-wrap bixi-scroll-y-shadow">
      <p class="direction">往下滚动会出现阴影 ⬇</p>
      <p class="content-y"></p>
      <p class="direction">往上滚动会出现阴影 ⬆</p>
    </div>
  `,
  styles: [`
    .scroll-wrap {
      height: 200px;
      overflow: auto;
      border: 1px solid #ebedf0;
    }
    .content-y{
      height: 500px;
    }
    .direction {
      text-align: center;
    }
  `]
})
export class BixiStylesComponent {}
```