目前,有没有办法在 CSS 或 CSS with JavaScript 中进行多列滚动?
为了描述我的意思,我在 jsfiddle 上设置了一个快速演示:
http://jsfiddle.net/S7AGp/
当 div 中有太多文本时,我希望能够垂直滚动,新文本从最右列的底部出现,旧文本从最左列上方退出 - 基本上,就像文本 -区域,两列除外。
相反,它会创建额外的列,您必须水平滚动才能找到这些列。
虽然我可以尝试将每一行文本存储在数组中,然后在滚动时更改它,但我很好奇是否已经有一种方法可以在纯 CSS 中执行此操作,或者是否已经存在通过 JavaScript 的解决方案。谢谢!
带垂直滚动的 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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)