---
title:
  zh-CN: bixi-scroll-x-shadow
  en-US: bixi-scroll-x-shadow
order: 1
---

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

```ts
import { Component } from '@angular/core';
@Component({
  selector: 'bixi-scroll-x-demo',
  template: `
    <div class="scroll-x-wrap bixi-scroll-x-shadow">
      <p class="left content">⬅️ 往右滚动会出现阴影</p>
      <p class="center content"></p>
      <p class="right content">往左滚动会出现阴影 ➡️</p>
    </div>
  `,
  styles: [`
    .scroll-x-wrap {
      height: 200px;
      overflow: auto;
      overflow-y: hidden;
      white-space: nowrap;
      border: 1px solid #ebedf0;
    }
    .content {
      display: inline-block;
      margin: 0;
    }
    .left, .right {
      width: 248px;
      white-space: normal;
      height: 200px;
      line-height: 200px;
    }
    .right {
      text-align: right;
    }
    .center {
      width: 300px;
    }
  `]
})
export class BixiStylesComponent {}
```