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

先验地采取的选择是好的，直接减少选项中时间线的高度就足够了，而不用这种情况下的“ 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>

Answer 2

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

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

如何实现垂直滚动条？

2 个答案: