css——指定某个区域可垂直或水平滑动

1.指定区域可上下滑动

效果如下：

##### html:

 <div class="demo">
        <div>语文</div>
        <div>数学</div>
        <div>音乐</div>
        <div>历史</div>
        <div>地理</div>
        <div>政治</div>
      </div>

scss:

  .demo {
    height: 92px; //指定可滑动区域高度
    width: 44px;
    overflow-y: auto; //出现垂直滚动条
    margin: 30px;//无关紧要的代码
    div {
      border: 1px solid rosybrown;
    }
  }

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

2.指定区域可左右滑动

效果如下：

html:

 <div class="demo1">
        <div>语文</div>
        <div>数学</div>
        <div>音乐</div>
        <div>历史</div>
        <div>地理</div>
        <div>政治</div>
      </div>

scss:

  .demo1 {
    height: 92px;
    width: 97px;//指定可滑动区域宽度
    overflow: hidden; //超出隐藏
    white-space: nowrap;//超出不换行
    overflow-x: auto;//出现水平滚动条
    margin: 30px;//无关紧要的代码
    div {
      display: inline-block;
      border: 1px solid rosybrown;
    }
  }