如何实现垂直滚动条？

Question

有谁知道如何为 vis.js 时间轴实现垂直滚动条？我已经阅读了 visjs.org 文档，堆栈溢出和 GitHub 上的其他线程，但我仍然无法实现滚动条。

在 vis.js 时间线的配置中写 verticalScroll: true 就足够了吗？这就是我目前的配置。我需要用其他方式写吗？或者我是否需要以完全不同的方式实现垂直滚动？

// Configuration for the Timeline
var options = {
    width: '100%',
    height: '100%',
    minHeight: '300px',
    padding: '0px',
    orientation: 'top',
    max: futureDate,
    min: pastDate,
    groupOrder: 'start',
    zoomMin: '86400000',
    margin: {item: {horizontal: 0, vertical: 5}, axis: 5},
    verticalScroll: true,
    zoomKey: 'ctrlKey'
};

Answer 1

听起来您可以使用 overflow-y: scroll 获得滚动条。此外，height: 100% 很可能永远不会导致这种情况发生（除非该元素包含在另一个具有设置高度的元素中），因为您正在编辑的元素将不断增加高度而不是保持一定的高度并且有一个滚动条。所以我建议删除 height: 100% 并改用 max-height（如果你的元素不包含在另一个元素中），所以如果元素内容增长到大于你的 max-height，它会开始滚动。如果您想为滚动条设置样式，那就完全不同了。

https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Answer 2

先验的选择是好的，直接在选项中降低时间轴的高度就足够了，而不是在这种情况下使用"minHeight"。通常，这应该会调出滚动条。

要检查这一点，请在选项中将时间轴高度降低到 150 像素（例如）也可以生成大量组，使它们超过时间线的垂直左面板容量，从而显示垂直滚动条。

更新了改编自“vis.js examples”的最小示例

另请参阅网站上的时间表 documentation 以配置选项...

<html>
<head>
  <title>Timeline | Vertical Scroll Option</title>

    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />

</head>

<body>

<h1>Timeline vertical scroll option</h1>

<h2>With <code>
verticalScroll: true,
zoomKey: 'ctrlKey'</code>
</h2>

<div id="mytimeline1"></div>

<script>

  // create groups
  var numberOfGroups = 25;
  var groups = new vis.DataSet()
  for (var i = 0; i < numberOfGroups; i++) {
    groups.add({
      id: i,
      content: 'Truck&nbsp;' + i
    })
  }

  // create items
  var numberOfItems = 1000;
  var items = new vis.DataSet();

  var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);

  for (var truck = 0; truck < numberOfGroups; truck++) {
    var date = new Date();
    for (var order = 0; order < itemsPerGroup; order++) {
      date.setHours(date.getHours() +  4 * (Math.random() < 0.2));
      var start = new Date(date);

      date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
      var end = new Date(date);

      var orderIndex = order + itemsPerGroup * truck
      items.add({
        id: orderIndex,
        group: truck,
        start: start,
        end: end,
        content: 'Order ' + orderIndex
      });
    }
  }

  // specify options
  var options = {
    stack: true,
    verticalScroll: true,
    zoomKey: 'ctrlKey',
    height: 200, // you can use also "300px"
    start: new Date(),
    end: new Date(1000*60*60*24 + (new Date()).valueOf()),
  };

  // create a Timeline
  var container1 = document.getElementById('mytimeline1');
  timeline1 = new vis.Timeline(container1, items, groups, options);

</script>

</body>
</html>

如何实现垂直滚动条？

How to implement a vertical scrollbar?

javascript

vis.js

vis.js-timeline