今天碰到一种情况 自动滚动div里面的内容的时候在页面没有缩放的情况下是好的
但是当页面缩放后 < 1 自动滚动就停止了 最后发现 缩放后整个区域比之前就大了 scrollTop貌似有个滚动的最小单位1
当页面没有缩放的时候也就是100%的时候scrollTop设置为1页面是会滚动的 当页面缩放了 比如为0.75 那么其实scrollTop
必须填写为1.4(扩大了1.33333倍)页面才会有反应自动滚动
//车辆滚动计时器对象
var rollCarTimer = null;
/**
* 滚动load
* @param {*} t 滚动时间
*/
function rollCar(t) {
//清楚上一次的timer
if (rollCarTimer) {
clearInterval(rollCarTimer);
}
// var ul1 = document.getElementsByClassName('main_carOutInHistory');
var ulbox = $('.main_carOutInHistory').first();
// ulbox.scrollTop(0); // 开始无滚动时设为0
rollCarTimer = setInterval(rollCarStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
// 鼠标移入div时暂停滚动
ulbox.mouseover(function () {
clearInterval(rollCarTimer);
});
// 鼠标移出div后继续滚动
ulbox.mouseout(function () {
if (rollCarTimer) {
clearInterval(rollCarTimer);
}
rollCarTimer = setInterval(rollCarStart, t);
});
}
/**
* 获取网页缩放的比例
*/
function zoomLevel() {
var screenCssPixelRatio = window.outerWidth / window.innerWidth;
return screenCssPixelRatio * 100;
}
// 开始滚动函数
function rollCarStart() {
//每一个时间间隔滚动的距离
var scrollValue = 1;
//最重要的一点计算滚动的长度
//因为网页缩放后 比如缩放到0.75这个时候如果滚动的距离还是1的话那么会失效
//需要计算缩放后的滚动的距离 这里相当于缩放后的网页(0.75)实际上可显示的
//区域是比原来扩大了1.3333倍 所以原来滚动的距离是1的话 那么缩放后的网页
//滚动的距离应该是1.3333了
var ratio = zoomLevel();
scrollValue = parseFloat((Math.ceil((100 / ratio) * 10) / 10).toFixed(2));
console.log('scrollValue is ' + scrollValue);
// 上面声明的DOM对象为局部对象需要再次声明
var ul1 = $('.main-caroutin-con').first();
var ulbox = $('.main_carOutInHistory').first();
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollTop() >= ul1.prop('scrollHeight')) {
ulbox.scrollTop(0);
} else {
ulbox.scrollTop(ulbox.scrollTop() + scrollValue);
}
}