我遇到了一个小问题,我似乎无法解决,希望各位给予指导。
我有一个包含一堆组和子组的时间线,并且时间线的高度现在大于显示它的显示器的高度。
这很好,可以使用鼠标上的滚轮滚动它,但是,由于它只是壁挂式屏幕上的时间线,如果我可以制作自动滚动功能,向上滚动时间线并在给定的时间范围内下降。
不幸的是,我不知道在哪里实施它才能使其发挥作用。
我有以下代码来制作 div 滚动(并尝试了不同的方法来使其在 vis.js 代码中实现,但到目前为止还没有运气)
如果有人知道如何使其在给定时间范围内上下滚动,我将非常感谢您的帮助。
<script language="javascript">
ScrollRate = 1;
function scrollDiv_init() {
//this can be a class also.
DivElmnt = document.getElementById('MyDivName');
ReachedMaxScroll = false;
DivElmnt.scrollTop = 0;
PreviousScrollTop = 0;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
if (!ReachedMaxScroll) {
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop++;
ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
}
else {
ReachedMaxScroll = (DivElmnt.scrollTop == 0) ? false : true;
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop--;
}
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
PreviousScrollTop = DivElmnt.scrollTop;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
</script>
嗯,我在http://visjs.org/examples/timeline/other/verticalScroll.html看到的关于滚动时间线的唯一棘手的部分是你必须滚动某些元素,而不是时间线的容器。如果您使用检查器查找带有滚动条的元素,您可能会惊讶地看到这一点:
确实,如果我将滚动应用于该元素
var scrollerElement = document.querySelector('#mytimeline1 div.vis-panel.vis-left.vis-vertical-scroll');
scrollerElement.scrollTop = 100;
时间线垂直滚动。顺便说一句,
vis-vertical-scroll
类表明我们走在正确的道路上。实际上,您可能应该使用更短的选择器:
var scrollerElement = document.querySelector('#mytimeline1 .vis-vertical-scroll');
您可以通过该页面上的浏览器控制台尝试此操作。我认为这应该足以让您实现所需的自动滚动。