bixi/packages/core/style/demo/bixi-scroll-x.md

企业级中后台前端解决方案

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

类 `bixi-scroll-x-shadow` 加在可滚动容器上，可以通过左边和右边阴影告知用户左边和右边是否有内容。

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