CSS / JavaScript中的多列垂直滚动 [英] Multi-Column Vertical Scrolling in CSS/JavaScript

查看:118
本文介绍了CSS / JavaScript中的多列垂直滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

目前,是否有一种方法可以使用JavaScript在CSS或CSS中执行多栏滚动?



为了描述我的意思,我设置了关于jsfiddle的快速演示:



http://jsfiddle.net / S7AGp /



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

相反,发生的是,它创建了额外的列,你必须水平滚动。



虽然我可以尝试存储每行文本在一个数组,然后改变滚动,我是好奇如果已经有一种方法在纯CSS或如果解决方案已经存在通过JavaScript。感谢!

解决方案

CSS栏目有垂直卷动。



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



HTML

 < div runat =serverid =div_scroll> 
< div runat =serverid =div_columns>
< p>一些文字...< / p>
< / div>
< / div>

CSS

  #div_scroll {
overflow-y:scroll;
overflow-x:hidden;
width:1060px; / *修改以适应* /
height:340px; / *修改以适应* /
}

#div_columns
{
direction:ltr; / *列方向ltr或rtl - 修改以适合* /
列:3; / *列数 - 修改为适应* /
overflow-y:hidden;
overflow-x:hidden;
width:1000px; / *必须指定列的宽度div - 修改为适合* /
/ *不指定height参数,因为它必须是无限制的* /
padding:20px;
}


Presently, is there a way to do multi-column scrolling in CSS or CSS with JavaScript?

To describe what I mean by this, I've set up a quick demo on jsfiddle:

http://jsfiddle.net/S7AGp/

When too much text is in the div, I would like to be able to scroll vertically, with new text coming up from bottom of the right-most column, and the old text exiting above the left most column - Basically, like a text-area, except with two columns.

Instead, what happens is that it creates extra columns you have to to scroll horizontally for.

While I could try to store each line of text in an array, and then change that on scroll, I was curious if there is already a way to do this in plain CSS or if a solution already exists via JavaScript. Thanks!

解决方案

CSS Columns with vertical scroll.

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

这篇关于CSS / JavaScript中的多列垂直滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆