如何添加项目才能滚动?

时间:2016-10-20 00:57:18

标签: html css css3 flexbox css-transforms

如何向下添加项目才能滚动?

enter image description here

enter image description here

2 个答案:

答案 0 :(得分:2)

使用transform: scaleY(-1)开始添加来自底部的元素

  1. transform: scaleY(-1)在容器上垂直反转

  2. transform: scaleY(-1)关于容器的孩子,以纠正对孩子的倒置。

  3. 甚至容器的溢出也从底部开始!

  4. 见下面的演示:

    body {
      margin: 0;
    }
    * {
      box-sizing: border-box;
    }
    .wrapper {
      border: 1px solid red;
      height: 100vh;
      overflow-y: auto;
      transform: scaleY(-1);
    }
    .wrapper > div {
      height: 100px;
      width: 50vh;
      border: 1px solid;
      margin: 10px auto;
      transform: scaleY(-1);
      /*align text inside*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    <div class="wrapper">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>

    让我知道您对此的反馈。谢谢!

答案 1 :(得分:0)

这是你的意思吗?

<div style="overflow-y:scroll;, height: 5px;">
    <span></span>
    <span></span>
    <span></span>
    <!-- any number of elements you want-->
</div>