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

最新推荐文章于 2024-09-04 17:39:50 发布

女程序媛的修炼笔记

最新推荐文章于 2024-09-04 17:39:50 发布

阅读量8.6k

点赞数 5

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_41589917/article/details/107199561

版权

css 专栏收录该内容

4 篇文章

订阅专栏

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;
    }
  }