How to implement a vertical scrollbar?

Does anyone know how to implement a vertical scrollbar for a vis.js timeline? I have read the visjs.org documentation, other threads here on stack overflow and on GitHub, but I still can't implement the scrollbar.

Should it be enough to write verticalScroll: true in the configuration for a vis.js timeline? This is what I have as configuration at the moment. Do I need to write it in some other way? Or do I need to implement the vertical scroll in a totally different way?

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

Solution

A priori the options taken are good, It would be enough to reduce the height of the timeline directly in the options rather than to use "minHeight" in this case. Normally, this should bring up the scroll bar.

To check this, reduce the timeline height to 150 px in the options (e.g) You can also generate a large number of groups so that they exceed the vertical left pannel capacity of timeline so that the vertical scrollbar displays.

UPDATED with minimal example adapted from "vis.js examples"

See also the timeline documentation on website for configuring options...

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