CSS / JavaScript中的多列垂直滚动 [英] Multi-Column Vertical Scrolling in CSS/JavaScript
问题描述
目前,是否有一种方法可以使用JavaScript在CSS或CSS中进行多栏滚动?
Presently, is there a way to do multi-column scrolling in CSS or CSS with JavaScript?
为了描述我的意思,我设置了关于jsfiddle的快速演示:
To describe what I mean by this, I've set up a quick demo on jsfiddle:
当div中有太多文本时,我希望能够垂直滚动,新的文本从最右边的列的底部向上,和旧文本退出在最左列 - 基本上,像一个文本区域,除了两列。
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.
虽然我可以尝试将每行文本存储在数组中,然后在滚动时更改,我很好奇,如果已经有一种在纯CSS中执行此操作的方法,或者如果通过JavaScript已经存在一个解决方案。感谢!
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栏目有垂直卷动。
CSS Columns with vertical scroll.
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屋!