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

类 `bixi-scroll-y-shadow` 加在可滚动容器上，可以通过底部和顶部阴影告知用户底部和顶部是否有内容。

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