javascript - 使用固定列垂直滚动

Question

我有一个包含动态内容的固定大小的容器。内容是一系列高度不同的元素。我希望元素垂直流动(每个在视觉上都在前一个之下)，但能够在特定元素上插入分栏符。我使用 JavaScript 注入(inject)分栏符，因此知道需要多少列，因此可以在某处注入(inject)总列数(如果有帮助的话)。

这是我一直在使用的，我认为曾经在 Chrome 中工作过的东西。希望在一列中包含 A1-A5，在第二列中包含 B1-B2。整个section应该垂直滚动，而不是水平滚动。

section { width:400px; height:300px; font:9pt sans-serif; overflow:auto }
div { margin-bottom:1em; -webkit-column-break-inside:avoid }
h3 { margin:0; background:#000; color:#fff; padding:4px; font-size:9pt }
span { display:block; height:45px; background:#ddd; padding:4px }

/* The following are injected by JavaScript */
section { -webkit-column-count:2 }
#B1 { -webkit-column-break-before:always }

<section>
  <div id="A1"><h3>A1</h3><span>content</span></div>
  <div id="A2"><h3>A2</h3><span>content</span></div>
  <div id="A3"><h3>A3</h3><span>content</span></div>
  <div id="A4"><h3>A4</h3><span>content</span></div>
  <div id="A5"><h3>A5</h3><span>content</span></div>
  <div id="B1"><h3>B1</h3><span>content</span></div>
  <div id="B2"><h3>B2</h3><span>content</span></div>
</section>

正如在 Chrome 中看到的那样，上面的代码片段将 A4 包装到第二列并创建了三列水平滚动。 如何实现两列垂直滚动的愿望？

_{更改全局 CSS 并将新的自定义 CSS 应用于每个 <div> 对我来说很容易使用 JavaScript，但是(出于复杂的原因)我很难使用 JavaScript 修改 DOM。我更喜欢不修改 DOM 的解决方案。}

Answer 1

我相信您遇到的问题与在第一个 css block 中定义“section”元素的高度有关。这样做:

section { width:400px; height:auto; font:9pt sans-serif; overflow:auto }

更改后一切都应该没问题。 jsfiddle here

不过你会失去固定大小。我找不到不满足此要求的配置。