如何向下添加项目以便能够滚动？答案

【问题标题】：How can I add items down to be able to scroll?如何向下添加项目以便能够滚动？
【发布时间】：2017-09-06 11:08:38
【问题描述】：

如何向下添加项目以便能够滚动？

【问题讨论】：

为什么我会有缺点？
我没有投反对票，但我认为这是因为问题应该表现出一些努力。每当有人只要求提供代码时，他们就会被否决。另外，你的问题不是很清楚。你刚刚展示了一张图片，但我不知道你想从图片中得到什么。什么是 span1、2 和 3？是否要将项目添加到底部？还是顶部？
@Andrew 是的。我想从下面添加元素

标签： html css flexbox css-transforms

【解决方案1】：

有一个 hack 使用transform: scaleY(-1) 从底部开始添加元素

transform: scaleY(-1) 在容器上垂直反转
transform: scaleY(-1) 在容器的子级上纠正子级的反转。
就连容器的溢出也是从底部开始的！

请看下面的演示：

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>

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

【讨论】：

OperaMini 和 EI8 - 不支持

【解决方案2】：

这是你的意思吗？

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

【讨论】：

您是要专注于padding 事物还是stack 跨度表单？
我会聊天。跨越它 - <span>Message</span> 。我想从底部添加消息