0

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

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

// 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'
};
4

2 回答 2

3

先验的选项是好的，直接在选项中减少时间线的高度就足够了，而不是在这种情况下使用“minHeight”。通常，这应该会显示滚动条。

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

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

另请参阅网站上的时间线文档以配置选项...

<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>

于 2018-07-22T05:52:56.530 回答
0

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

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

于 2018-07-20T18:38:12.367 回答