帆软报表：决策报表中存在多个报表块时滚动/跑马灯效果失效

背景

帆软报表里使用决策报表添加多个报表块，且需要实现各自报表块的滚动效果。按照技术文档各自操作后发现滚动异常。异常现象如下：

• 报表块可以实现滚动；但是鼠标放在报表块上滚动效果不停止（随机一个报表块可以正常实现停止滚动，其它报表块鼠标放上去之后无法停止）。

解决

此时需要在body块里添加JS语句。js语句也需要进行改良，JS语句如下：

setTimeout(function() {
	AutoScroll(["REPORT1", "REPORT2", "REPORT3"]); //此处根据实际报表需求添加REPORT块名称
	//定义需要跑马灯效果的报表块名字，兼容大小写
}, 9000);
//延时500ms，如果模板加载较慢，需要调大此数字


function AutoScroll(e) {
	for (i = 0; i < e.length; i++) {
		(function(e, i) {
			scroll(e, i);
		})(e, i);
	}

}

function scroll(e, i) {
	var $report = $("div[widgetname=" + e[i].toUpperCase() + "]");
	//获取对应report的div元素
	var $scroll;
	if ($report.find(".frozen-center").length != 0) {
		$scroll = $report.find(".frozen-center");
	} else if ($report.find(".scrollDiv").length != 0) {
		$scroll = $report.find(".scrollDiv");
	} else {
		$scroll = $report.find(".reportContent");
	}
	//判断是否冻结以及是否安装自定义滚动条插件
	var flag = eval("window.flag" + i);
	//设置全局flag，控制悬停
	if (interval) {
		clearInterval(interval);
	}
	//清除定时器，避免越滚越快
	var interval = eval("window.interval" + i);
	$report.find("#frozen-center").css('overflow-x', 'hidden');
	$report.find("#frozen-center").css('overflow-y', 'hidden');
	$report.find("#frozen-north").css('overflow-x', 'hidden');
	$report.find("#frozen-north").css('overflow-y', 'hidden');
	//冻结情况下隐藏滚动条
	$report.find(".reportContent").css('overflow-y', 'hidden');
	$report.find(".reportContent").css('overflow-x', 'hidden');
	//非冻结情况下隐藏滚动条
	flag = true;
	$scroll.mouseover(function() {
		flag = false;
	})
	//鼠标悬浮，滚动停止
	$scroll.mouseleave(function() {
		flag = true;
	})
	//鼠标离开，继续滚动
	var old = -1;
	interval = setInterval(function() {
		if (flag) {
			currentpos = $scroll[0].scrollTop;
			//获取距顶部距离
			if (currentpos == old) {
				$scroll[0].scrollTop = 0;
				//若已到达底部，则重置
			} else {
				old = currentpos;
				$scroll[0].scrollTop = currentpos + 1.5;
				//若未到达底部，则向下移动1.5像素
			}
		}
	}, 25);
	//以25ms的频率执行
}

注意：如果数据比较多的话，将JS语句中的这个值调大即可：