如何实现垂直滚动条？
如何实现垂直滚动条？
提问于 2018-07-21 02:28:53
有人知道如何为vis.js时间轴实现垂直滚动条吗？我已经阅读了visjs.org文档，在堆栈溢出和GitHub上的其他线程，但我仍然无法实现滚动条。
在vis.js时间线的配置中编写verticalScroll: true就足够了吗？这就是我目前的as配置。我需要用其他方式写吗？或者我需要以一种完全不同的方式实现垂直滚动？
// 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'
};回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-22 13:52:57
一个先验的选项是好的，在这种情况下，直接在选项中减少时间线的高度就足够了，而不是使用"minHeight“。正常情况下，这应该会弹出滚动条。
要检查这一点，在选项中将时间线高度减少到150px(例如)您还可以生成大量的组，使它们超过时间线的垂直左侧窗格容量，以便显示垂直滚动条。
根据改编自"vis.js examples“的最小示例进行更新
另请参阅网站上的timeline 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 ' + 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>
Stack Overflow用户
发布于 2018-07-21 02:38:12
听起来你可以使用overflow-y: scroll获得一个滚动条。此外，height: 100%很可能永远不会导致这种情况发生(除非这个元素包含在另一个设置了高度的元素中)，因为您正在编辑的元素将保持高度增长，而不是保持一定的高度并具有滚动条。因此，我建议删除height: 100%并改用max-height (如果您的元素不包含在另一个元素中)，因此如果元素内容增长到比max-height更大的内容，它将开始滚动。如果你想设计滚动条，那就完全是另外一回事了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51448459
复制相关文章
相似问题