9

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

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

http://jsfiddle.net/S7AGp/

当 div 中的文本太多时，我希望能够垂直滚动，新文本从最右边一列的底部出现，旧文本从最左边一列上方退出 - 基本上，就像一个文本 -区域，除了两列。

相反，它会创建额外的列，您必须水平滚动。

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

4

3 回答 3

5

带有垂直滚动的 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;  
    }
于 2013-05-21T16:35:13.020 回答
1

我想您是在询问诸如 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

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

于 2012-06-02T20:46:49.270 回答
0

不好：
使用绝对定位快速尝试：http: //jsfiddle.net/PhilippeVay/S7AGp/1/，其想法是使用bottom: 0;将文本底部定位在容器底部。

它不起作用，因为绝对定位会从流中删除其内容，并且容器中没有任何内容（例如，您不会使用滚动条 afaik 移动绝对定位的元素）。

好：
所以这是一个使用 scrollTop() 的解决方案。

注意：我使用了 jQuery，但如果您在项目的其他地方不使用 jQuery 或其他框架，那么这个应该在 JS 中

于 2012-06-02T21:59:46.480 回答