目前,有没有办法在 CSS 或 CSS 中使用 JavaScript 进行多列滚动?
为了描述我的意思,我在 jsfiddle 上设置了一个快速演示:
当 div 中的文本太多时,我希望能够垂直滚动,新文本从最右侧列的底部出现,旧文本从最左侧列上方退出 - 基本上,就像一个文本区域,除了两列。
相反,它会创建额外的列,您必须为此水平滚动。
虽然我可以尝试将每一行文本存储在一个数组中,然后在滚动时更改它,但我很好奇是否已经有一种方法可以在纯 CSS 中执行此操作,或者是否已经存在通过 JavaScript 的解决方案。谢谢!
最佳答案
具有垂直滚动的 CSS 列。
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;
}
关于javascript - CSS/JavaScript 中的多列垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10865717/