使用固定列垂直滚动

Question

我有一个包含动态内容的固定大小的容器。内容是一系列不同高度的项目。我希望这些项目垂直流动（每个项目都在前一个项目的下方），但能够在特定项目上注入分栏符。我使用 JavaScript 来注入分栏符，从而知道需要多少列，从而可以在某处注入总列数（如果有帮助）。

这是我一直在使用的，我认为曾经在 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 中看到的那样，上面的 sn-p 将 A4 包装到第二列并创建水平滚动的三列。 如何实现两列垂直滚动的愿望？

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

Answer 1

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

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

有了这个改动，一切都会好起来的。 jsfiddle here

你会失去固定的大小。我找不到不符合此要求的配置。