CSS/JavaScript中的多列垂直滚动

Question

目前,有没有办法用CSS在CSS或CSS中进行多列滚动？

为了描述我的意思,我在jsfiddle上设置了一个快速演示:

http://jsfiddle.net/S7AGp/

当div中有太多文本时,我希望能够垂直滚动,新文本从最右侧列的底部出现,而旧文本从最左侧列出现 - 基本上,就像文本一样 - 区域,除了两列.

相反,它会产生额外的列,你必须水平滚动.

虽然我可以尝试将每行文本存储在一个数组中,然后在滚动时更改它,但我很好奇是否已经有一种方法可以在纯CSS中执行此操作,或者如果已经通过JavaScript存在解决方案.谢谢!

Answer 1

带有垂直滚动的CSS列.

http://jsfiddle.net/MmLQL/3/

HTML

    <div runat="server" id="div_scroll">
       <div runat="server" id="div_columns">
          <p> Some text ...</p>
       </div>
    </div>

CSS

    #div_scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 1060px; /*modify to suit*/
    height: 340px; /*modify to suit*/
    }

    #div_columns
    {
    direction:ltr; /*column direction ltr or rtl - modify to suit*/
    columns: 3; /*number of columns - modify to suit*/
    overflow-y: hidden;
    overflow-x: hidden;
    width: 1000px; /*width of columns div has to be specified - modify to suit*/
    /* do not specify height parameter as it has to be unrestricted*/
    padding: 20px;  
    }

Answer 2

我想你问的是像css区域这样的东西：http://net.tutsplus.com/tutorials/html-css-techniques/diving-into-css-regions/

HTML：

<p class="example-text">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>

<div class="regions"></div>
<div class="regions"></div> 

CSS：

.example-text {
  -webkit-flow-into: example-text-flow;
  padding: 0;
  margin: 0;
}

.regions {
   -webkit-flow-from: example-text-flow;
   border: 1px solid black;
   padding: 2px;
   margin: 5px;
   width: 200px;
   height: 50px;
}

他们现在的支持仅限于 webkit： http: //caniuse.com/css-regions

不幸的是，我不知道有任何后备或替代方案。